Vant安装过程点击进入查看

app.vue中的代码如下：

<template><div ref="box" class="box" v-html="imageText"></div>
</template>
<script setup>
import { showImagePreview } from 'vant';
import {onMounted, ref} from "vue";
// 给一段文本字符串的html
const imageText = ref(`<div class="box"><img style="width: 100%" src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" alt=""><img style="width: 100%" src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" alt=""></div>`)// 方式一 querySelector方式
onMounted(()=>{const box = document.querySelector('.box');console.log('box', box)// const image_list = box.value.querySelectorAll('img')const image_list = box.querySelectorAll('img')const images = []image_list.forEach((item,index)=>{images.push(item.src)item.onclick = ()=>{showImagePreview({images,startPosition: index})}})
})// 方式二 ref方式
// const box = ref(null)
// onMounted(()=>{
//   const image_list = box.value.querySelectorAll('img')
//   const images = []
//   image_list.forEach((item,index)=>{
//     images.push(item.src)
//     item.onclick = ()=>{
//       showImagePreview({
//         images,
//         startPosition: index
//       })
//     }
//   })
// })
</script><style scoped lang="less"></style>

效果如下：

未点击时：

点击完后