如何实现给使用了v-html解析了富文本编辑器内容之后的img标签里的图片加上el-image的查看大图效果功能？

如何实现给使用了v-html解析了富文本编辑器内容之后的img标签里的图片加上el-image的查看大图效果功能？
1.在解析富文本编辑器内容的div外面写一个隐藏的el-image,设置diplay:none

```javascript
<el-image style="displa:none" ref="previewImg" :src="activeImg" :preview-src-list="[activeImg]"></el-image>

记得在data里定义activeImg
2.这是解析富文本编辑器内容的地方

```javascript
<li v-for="(item,i) in sysMessageList" :key="i">
   <div class="text-id" v-html="item.article"></div>
</li>

3.在 methods里写方法

//给img标签绑定的点击事件
previewImgClickHandler(evtData) {
    let vm = this;

    vm.previewImg(evtData.target.getAttribute("src"));
},
//这是el-image的点击事件，通过在img标签的点击事件里执行该事件，实现点击图片查看大图
previewImg(img) {
    let vm = this;

    vm.activeImg = img;
    vm.$refs.previewImg.clickHandler();
},
//这是调接口获取富文本编辑器内容的地方，通过正则匹配，给img标签动态加上类名
getSysMessageList() {
    //这里调接口获取消息列表
    //在获取列表数据后，使用正则将富文本编辑器内容的img标签筛选出来并加上类名preview-img
    vm.sysMessageList.forEach((item) => {
        item.article = item.article.replace(
            /(\<img [^\<\>]*src=\"[^\"]+\")([^\<\>]*\/\>)/g,
            (a, p1, p2p, c, d) => {
                return `${p1} class="preview-img" ${p2}`;
            }
        );
    });
},

4.在mounted里给img标签绑定点击事件

mounted() {
let vm = this;

vm.$nextTick(() => {
    Array.from(document.querySelectorAll(".preview-img")).forEach(
        (img) => {
            img.addEventListener(
                "click",
                vm.previewImgClickHandler,
                true
            );
        }
    );
});
},

5.在beforeDestroy移除点击事件

beforeDestroy() {
  Array.from(document.querySelectorAll(".preview-img")).forEach((img) => {
      img.removeEventListener("click", vm.previewImgClickHandler, true);
  });
},