我在开发聊天界面的过程中,聊天内容部分是使用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; } },