在外面写一个隐藏el-image标签,给这个标签加上点击事件
<div>
<el-image
style="display: none"
ref="previewImg"
:src="activeImg"
:preview-src-list="[activeImg]"
></el-image>
<div v-html="caseDetail.article"></div>
</div>
data() {
return {
caseDetail: {},
activeImg: "",
};
},
mounted() {
let vm = this;
vm.$nextTick(() => {
//在调接口函数执行后才遍历img标签列表并绑定click事件
vm.getArticleList().then(() => {
setTimeout(() => {
Array.from(
document.querySelectorAll(".preview-img")
).forEach((img) => {
img.addEventListener(
"click",
vm.previewImgClickHandler,
true
);
});
}, 100);
});
});
},
beforeDestroy() {
let vm = this;
Array.from(document.querySelectorAll(".preview-img")).forEach((img) => {
img.removeEventListener("click", vm.previewImgClickHandler, true);
});
},
methods: {
previewImgClickHandler(evtData) {
let vm = this;
vm.previewImg(evtData.target.getAttribute("src"));
},
previewImg(img) {
let vm = this;
vm.activeImg = img;
vm.$refs.previewImg.clickHandler();
},
getArticleList() {
//获取文章内容的调接口的地方
//此处省略调接口方法
vm.caseDetail = res.data;
vm.caseDetail.article = vm.caseDetail.article.replace(
//用正则筛选出富文本编辑器中的img标签
/(\<img [^\<\>]*src=\"[^\"]+\")([^\<\>]*\/\>)/g,
(a, p1, p2, c, d) => {
//给图片标签加上自定义类名
return `${p1} class="preview-img" ${p2}`;
}
);
},
},