html富文本图片点击放大

文本图片点击放大"/>

html富文本图片点击放大

功能很简单，这里就把主要代码放一起，复制过去测试一下就行了

界面代码
<p @click="imageChange($event)" v-html="item.msg"></p><!-- 富文本图片放大 --><divclass="imgDolg"v-show="imgPreview.show"@click.stop="imgPreview.show = false"><iclass="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.srcthis.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%;}
}