<!-- 富文本中图片放大预览部分 -->
<div v-show="imgShow" id="imgMask" @click="imgShowHandler">
<div v-show="imgShow" class="previewImg" @click="imgShowHandler">
<img :src="previewImg" alt="">
</div>
</div>
data() {
return {
imgShow: false,
previewImg: '', // 预览图片路径
}
},
methods: {
showImg(e) {
if (e.target.tagName == 'IMG') {
this.previewImg = e.target.src
this.imgShow = true
}
},
imgShowHandler() {
this.imgShow = false
}
}
<style scoped lang="less">
#imgMask{
width:100%;
height:100%;
background-color: rgba(0, 0, 0,0.3);
z-index:9999;
position:fixed;
cursor: pointer;
.previewImg{
cursor: pointer;
z-index: 9999;
position: fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
}
.clickPoint img{
cursor: pointer;
}
</style>
富文本编辑器中需支持图片点击放大功能，也可用这种方式实现
原效果：
image.png
点击放大后的效果：
image.png
