[绍棠]vue 富文本 v-html 点击图片放大预览展示功能_v-html使用img点击实现放大效果-CSDN博客

本文详细介绍了如何在HTML页面中添加富文本图片放大功能，包括使用v-bind和v-on指令，以及CSS样式和JavaScript方法的配合，展示了如何通过点击事件触发图片预览对话框的显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分注册方法

<div class="page_right_new_detail_content" v-html="detailContent?detailContent.context:''" @click="showImg($event)">

放大展示区dialog

<!-- 富文本图片放大 -->
    <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>

imgPreview:{
          img:"",
          show:false
        }

methods

// 图片点击放大
      showImg(e) {
        // console.log(e.target)
        if (e.target.tagName == 'IMG' && e.target.src) {
          this.imgPreview.img = e.target.src;
          this.imgPreview.show = true;
        }
      },

css

 //富文本图片放大
  .imgDolg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    #imgDolgClose {
      position: fixed;
      top: 25px;
      cursor: pointer;
      right: 4%;
      font-size: 50px;
      color: white;
    }
    img{
      width: 60%;
    }
  }