v-html展示富文本數據，實現圖片放大預覽功能

HTML：

<!-- 富文本內容展示部分 -->
<div class="quillCon ql-editor" v-html="quillContent" @click="showImg($event)"></div>


<!-- 富文本中圖片放大預覽部分 -->
<div class="previewImg" @click="imgShowHandler" v-show="imgShow">
   <img :src="previewImg" alt="">
</div>

js:

<script>
export default {
  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
      },
  },
}
</script>

 CSS:

.home .previewImg{
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background:#000000;
  position: fixed;
  top:0;
  left: 0;
  display: flex;
  align-items: center;
  img{
    width:100vw;
  }
}