富文本中图片点击放大

富文本中图片点击放大，通过element-UI中图片预览实现看大图

<div class="box" v-html="demoHtml" @click="showImage($event)"></div>
<el-image-viewer
  v-if="dialogVisible"
  :on-close="closeImage"
  :url-list="[url]"
/>

import ElImageViewer from "element-ui/packages/image/src/image-viewer"
export default {
    components: {
        ElImageViewer
    },
    data () {
        return {
            demoHtml: '<p><img src=""><p><img src=\"url"></p>',
            url: '',
            dialogVisible: false
        }
    },
    methods: {
        showImage (e) {
            if (e.target.tagName == 'IMG') {
                console.log(e.target.src)
                this.url = e.target.src
                this.dialogVisible = true
            }
        },
        closeImage () {
            this.dialogVisible = false
            this.url = ''
        }
    }
}

通过给放富文本的盒子添加点击事件，通过e.target.tagName获取点击的是否为img元素来获取src地址以及弹框展示大图
通过引入element-UI中的ElImageViewer实现大图展示。
该组件在element-ui中没有暴露出来因此需要在页面中引入才能使用。

另一种方式

richImg(txt) {//txt 指的是接口返回的富文本
  // 主要代码
  let imgarr = [];
  let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片
  let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片
  let arrsImg = txt.match(regex); 
  for (let i = 0; i < arrsImg.length; i++) {
  let srcs = arrsImg[i].match(srcReg);
  imgarr.push(srcs[1])
  }
  return imgarr  //把富文本里的图片返回
}

获取到所有的图片放到一个集合中然后放一个按钮，可以点击放大图片有上一个，下一个展示