Vue v-html中img标签大图预览

问题场景为富文本编辑器添加的html代码块使用v-html渲染，要求对其中的img标签增加点击大图预览效果。

<div class="content" v-html="content"></div>

本文通过element-ui的el-image实现图片预览

<el-image v-if="imgPreviewUrl" ref="previewImg" style="display: none"
    :src="imgPreviewUrl" 
    :preview-src-list="[imgPreviewUrl]">
</el-image>

由于v-html渲染后无法二次渲染，即只能通过原生的点击事件实现

data() {
    return {
      content: '',
      imgPreviewUrl: ''
    }
  },
  created() {
    var _this = this
    window.previewImg = function(url) {
        _this.imgPreviewUrl = url
        setTimeout(() => {
            _this.$refs.previewImg.showViewer = true
        }, 200)
    }
  },
  methods: {
    getData() {
        this.content = ...
        var _this = this
        this.content.replace(/<img src="[^>]*>/gi, function(val) {
            var src = val.split('<img src="')[1].split('">')[0]
            var url = '<img onclick="previewImg(\'' + src + '\')" src="' + src + '">'
            _this.content = _this.content.replace(val, url);
        })
    }
  }

总结与思路：首先将html代码块中的img标签添加点击事件（待图片路径参数），添加vm的点击事件无效可通过window对象代替，点击事件触发配置好的图片预览事件（文中使用el-image的点击预览）即可完成。