实现v-html中多图片点击放大预览

<template>
    <div class="editorWrap" @click="wrapClick($event,strategyData.content)" v-html="strategyData.content">

    </div>

    <el-image-viewer
      v-if="showViewer"
      :z-index="20000"
      :on-close="closeViewer"
      :url-list="srcList"
    />
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
    components: {
        ElImageViewer
    },
    methods: {
        // 关闭大图预览
        closeViewer() {
          this.showViewer = false
        },
        
        // v-html模块点击
        wrapClick(event, item) {
          const target = event.target
          if (target.tagName === 'IMG') {
            console.log(event.target.src)
            event.preventDefault()
            const content = item
            const imgReg = /<img.*?(?:>|\/>)/gi                   // 匹配图片中的img标签
            const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i            // 匹配图片中的src
            const arr = content.match(imgReg)                   // 筛选出所有的img
            const srcArr = []
            for (let i = 0; i < arr.length; i++) {
              const src = arr[i].match(srcReg)
              // 获取图片地址
              srcArr.push(src[1])
            }
            this.srcList = srcArr

            this.srcList.unshift(event.target.src)
            const set = new Set(this.srcList)
            this.srcList = Array.from(set)
            this.showViewer = true
          }
        },
    
    }
}

</script>