关于前端:富文本中图片点击放大

富文本中图片点击放大，通过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中没有裸露进去因而须要在页面中引入能力应用。