最近写Vue项目的时候，用的是ElementPlus框架组件库，一般如果要实现图片点击预览效果，可以直接使用el-image组件，然后设置preview-src-list属性即可:

<el-image
      style="width: 100px; height: 100px"
      :src="url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
    />

但由于我使用的是wangEditor富文本编辑器，它保存的内容中图片是原生的html标签<img/>元素，所以我就打算在vue mounted生命周期中使用el-image-viewer组件为所有img元素增加图片点击预览事件。

先写好预览元素内容如下：

<div v-if="previewVisible" style="z-index: 9999">
  <el-image-viewer :url-list="previewSrc" @close="previewClose"/>
</div>

我的内容区域代码如下：

<div v-html="blog.content" class="blog-content" ref="blogContent">
</div>

mounted代码如下，获取元素写法可以根据自己框架的写法来改动：

// 为内容中的图片元素加上点击预览事件
const blogContentEle = blogContent.value
const imageItems = blogContentEle.querySelectorAll('img')
for (let i = 0; i < imageItems.length; i++) {
  imageItems[i].addEventListener('click', () => {
    handlePreview(imageItems[i].src)
  });
}

图片预览事件和关闭预览代码如下：

function handlePreview(src) {
  previewVisible.value = true
  previewSrc.value = [src]
}

function previewClose() {
  previewVisible.value = false
  previewSrc.value = []
}