解析富文本编辑器内容的图片时如何加入element ui的查看大图功能

在外面写一个隐藏el-image标签，给这个标签加上点击事件

    
    



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}  ${p2}`;
            }
        );
    },
},