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

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