html v-html点击富文本图片放大 缩放

***html v-html点击富文本图片放大 缩放***

html代码

 <div class="rich-text" v-html="richText" @click="showImg($event)"></div>
<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"
          class="img"
          :src="imgPreview.img"
        />
</div>

script代码 我这里是vue的

<script>
      new Vue({
        el: "#ordinaryNews",
        data: {
        richText: "",
          imgPreview: {
            img: "",
            show: false,
          },
        },
        created() {
        },
        mounted: function () { 
        },
        methods: {
          showImg(e) {
            // console.log(e.target)
            if (e.target.tagName == "IMG") {
              this.imgPreview.img = e.target.src;
              this.obj = e.target.src;
                this.imgPreview.show = true;
            }
          },
         },
      });
    </script>

css代码

    <style lang="scss" scoped>
      * {
        touch-action: auto;
      }
      .news-detail {
        width: 100%;
        height: 667px;
        overflow: hidden;
        overflow-y: scroll;
      }
      .news-details {
        width: 100%;
      }
      /* //富文本图片放大 */
      .imgDolg {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 9999;
        /* background-color: rgba(140, 134, 134, 0.6); */
        background-color: black;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      #imgDolgClose {
        position: fixed;
        top: 35px;
        cursor: pointer;
        right: 7%;
        font-size: 50px;
        color: white;
      }

      .img {
        margin: 15% auto;
        /*  top: 35px; */
        cursor: pointer;
        font-size: 50px;
        color: white;
        /* position: fixed; */
        width: 100%;
        height: 280px !important;
      }
    </style>
    <style>
      img {
        width: 100%;
      }
    </style>