功能很简单,这里就把主要代码放一起,复制过去测试一下就行了
界面代码
<p @click="imageChange($event)" v-html="item.msg"></p>
<!-- 富文本图片放大 -->
<div
class="imgDolg"
v-show="imgPreview.show"
@click.stop="imgPreview.show = false"
>
<i
class="el-icon-close"
id="imgDolgClose"
@click.stop="imgPreview.show = false"
></i>
<img @click.stop="imgPreview.show = true" :src="imgPreview.img" />
</div>
js代码
data(){
return{
imgPreview:{
img:"",
show:false
}
}
}
//富文本图片点击放大
imageChange(e) {
if (e.target.tagName == 'IMG') {
this.imgPreview.img = e.target.src
this.imgPreview.show = true
}
},
css代码
//富文本图片放大
.imgDolg {
width: 100vw;
height: 100vh;
position: fixed;
z-index: 9999;
background-color: rgba(140, 134, 134, 0.5);
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
#imgDolgClose {
position: fixed;
top: 20px;
cursor: pointer;
right: 20px;
font-size: 50px;
color: white;
}
img{
width: 90%;
}
}