<template>
<div>
<div v-html="content"></div>
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="contentPic"
:z-index="9999"
/>
</div>
</template>
JS代码
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';、
components: { ElImageViewer },//引入element组件
getHtmlPic(val) {
if (!val) return;
const srcList = [];
this.content = val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
srcList.push(capture); // capture图片地址 match img标签整体
return `<img src=${capture} class="content-img" style="width:100%;display:block">`; //给图片添加class方便后面取dom
});
this.$nextTick(() => {
const imgHtml = document.getElementsByClassName('content-img');
for (let i = 0; i < imgHtml.length; i += 1) {
imgHtml[i].onclick = () => {
//解决点击预览时不是当前图片问题
const tempImgList = [...srcList]; // 所有图片地址
if (i === 0) {
this.contentPic = tempImgList;
} else {
// 调整图片顺序,把当前图片放在第一位
const start = tempImgList.splice(i);
const remain = tempImgList.splice(0, i);
this.contentPic = start.concat(remain);
}
this.onPreview();
};
}
});
},
onPreview() {
this.showViewer = true;
},
closeViewer() {
this.showViewer = false;
},