我在开发聊天界面的过程中,聊天内容部分是使用v-html渲染出来的,能够展示html内容
但是加载的图片是不能点击放大查看的,现在增加点击放大预览功能
首先html部分是下面这样的,也就是下面要增加一个隐藏的el-image
<div v-html="row.content" @click="htmlBoxClick($event)"></div>
<!-- 大图预览 -->
<el-image
style="display: none;"
ref="preview"
class="hideImgDiv"
:src="imgPreviewSrc[0]"
:preview-src-list="imgPreviewSrc"
></el-image>
<!-- //大图预览 -->
点击事件函数是,富文本内容点击的时候,判断当前是img标签,获取到图片内容,赋值给数组以后,执行隐藏图片的点击事件
//富文本渲染文本点击
htmlBoxClick(e){
if (e.target.nodeName === 'IMG'|| e.target.nodeName == 'img') { //判断是否图片标签
const img = e.target.currentSrc //获取点击图片地址
this.imgPreviewSrc=[img];
this.$refs.preview.clickHandler();
return false;
}
},