GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/TinyModule.vue

<!--  -->
<template>
  <div class="Big-Book-prev-Tiny Big-Book-prev-Tiny-phone" v-if="curQue">
    <div
      v-html="curQue.con_new"
      class="tiny-box"
      @click="showImg($event)"
      :style="{ fontSize: baseSizePhone + 2 + 'px' }"
    ></div>
    <el-dialog
      title=""
      :visible.sync="dialogImg"
      width="100%"
      :show-close="false"
    >
      <img :src="dialogueImgSrc" width="100%" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["curQue", "baseSizePhone"],
  data() {
    return {
      dialogImg: false,
      dialogueImgSrc: ""
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    showImg(e) {
      if (e.target.tagName === "IMG") {
        this.dialogueImgSrc = e.target.src;
        this.dialogImg = true;
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let imgArr = this.curQue.con.split("<img");
    let con_new = "";
    if (imgArr.length > 1) {
      con_new += imgArr[0];
      for (let i = 1; i < imgArr.length; i++) {
        let widthStr = imgArr[i].substring(imgArr[i].indexOf('width="') + 7);
        widthStr = widthStr.substring(0, widthStr.indexOf('"'));
        if (widthStr < 780) {
          let heightStr = imgArr[i].substring(
            imgArr[i].indexOf('height="') + 8
          );
          heightStr = heightStr.substring(0, heightStr.indexOf('"'));
          heightStr = 'height="' + heightStr + '"';
          imgArr[i].replace(heightStr, 'height="auto"');
          imgArr[i] =
            imgArr[i].substring(0, imgArr[i].indexOf('width="') + 7) +
            "70%" +
            imgArr[i].substring(
              imgArr[i].indexOf('width="') + 7 + widthStr.length,
              imgArr[i].indexOf(heightStr)
            ) +
            'height="auto"' +
            imgArr[i].substring(
              imgArr[i].indexOf(heightStr) + heightStr.length
            );
        }
        con_new += "<img " + imgArr[i];
      }
    } else {
      con_new = this.curQue.con;
    }
    this.curQue.con_new = con_new;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.Big-Book-prev-Tiny {
  width: 100%;
  // margin-bottom: 24px;
  h2 {
    margin: 16px 0 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
  }
  .tiny-box {
    word-break: break-word;
    overflow: hidden;
  }
}
</style>
<style lang="scss">
.Big-Book-prev-Tiny {
  p {
    margin: 0;
  }
}
.Big-Book-prev-Tiny-phone {
  img {
    max-width: 100%;
    height: auto;
  }
  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
    background: none;
  }
}
</style>