vue渲染富文本數據中圖片點擊顯示大圖——單張圖片

 

<div class="textarea" v-html="detailInfo.text" @click="showImg($event)"></div>

<!-- 富文本圖片放大 -->
<div class="imgDolg" v-show="imgPreview.show">
  <i class="el-icon-close" id="imgDolgClose" @click.stop="imgPreview.show = false"></i>
  <el-image ref="imgDolg" class="img" :src="imgPreview.img" fit="cover"></el-image>
</div>

 

data() {
  return {
    // 圖片放大
    imgPreview: {
       img: '',
       show: false,
    },
  }
}

methods: {
  // 圖片點擊放大
        showImg(e) {
            if (e.target.tagName == 'IMG') {
                this.imgPreview.img = e.target.src
                this.imgPreview.show = true
            }
        },
}

 

//富文本圖片放大
.imgDolg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    background-color: rgba(140, 134, 134, 0.6);
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    #imgDolgClose {
        position: fixed;
        top: 35px;
        cursor: pointer;
        right: 7%;
        font-size: 50px;
        color: white;
    }
    .img {
        width: 70%;
        max-height: 90%;
    }
}
.img-hidden {
    width: 0 !important;
    height: 0 !important;
    // visibility:hidden;
}