给一个字符中的img标签添加图片预览功能，Vant组件、ref和querySelector两种方式实现

最新推荐文章于 2024-05-16 11:32:42 发布

jjw_zyfx

最新推荐文章于 2024-05-16 11:32:42 发布

阅读量1k

点赞数

分类专栏： vue 前端 css 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/129939863

版权

前端同时被 3 个专栏收录

296 篇文章 0 订阅

订阅专栏

vue

139 篇文章 1 订阅

订阅专栏

css

71 篇文章 0 订阅

订阅专栏

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>