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

38次阅读

共计 683 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完