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