ElementPlus自定义图片预览组件el-image-viewer使用指南

发布日期 2023-10-25 21:16:21 已于 2023-10-25 21:17:33 修改

最近写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 = []
}



年末感恩回馈