app.vue中的代码如下:
<template>
<div ref="box" class="box" v-html="imageText"></div>
</template>
<script setup>
import {
showImagePreview } from 'vant';
import {
onMounted, ref} from "vue";
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>`)
onMounted(()=>{
const box = document.querySelector('.box');
console.log('box', box)
const image_list = box.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>
效果如下:
未点击时:
![在这里插入图片描述](https://img-blog.csdnimg.cn/8a9f5feb1d2f4c6182e144886cb478bb.png)
点击完后
![在这里插入图片描述](https://img-blog.csdnimg.cn/c436d9fb30e348b78e8b88d59f0c84e7.png)