富文本处理图片

src/components/Adult/phonePreview/TinyModule.vue

@@ -1,12 +1,19 @@
 <!--  -->
 <template>
-  <div
-    class="Big-Book-prev-Tiny"
-    v-if="curQue"
-    :class="[isPhone ? 'Big-Book-prev-Tiny-phone' : '']"
-  >
-    <h2 v-if="curQue.title">{{ curQue.title }}</h2>
-    <div v-html="curQue.con" class="tiny-box" @click="showImg($event)"></div>
+  <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)"
+    ></div>
+    <el-dialog
+      title=""
+      :visible.sync="dialogImg"
+      width="100%"
+      :show-close="false"
+    >
+      <img :src="dialogueImgSrc" width="100%" />
+    </el-dialog>
   </div>
 </template>
 
@@ -15,7 +22,10 @@ export default {
   components: {},
   props: ["curQue", "isPhone"],
   data() {
-    return {};
+    return {
+      dialogImg: false,
+      dialogueImgSrc: ""
+    };
   },
   computed: {},
   watch: {},
@@ -23,12 +33,47 @@ export default {
   methods: {
     showImg(e) {
       if (e.target.tagName === "IMG") {
-        console.log(e.target.width);
+        this.dialogueImgSrc = e.target.src;
+        this.dialogImg = true;
       }
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  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 + '"';
+          console.log(heightStr);
+          imgArr[i].replace(heightStr, 'height="auto"');
+          imgArr[i] =
+            imgArr[i].substring(0, imgArr[i].indexOf('width="') + 7) +
+            "80%" +
+            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() {}, //生命周期 - 创建之前
@@ -69,5 +114,10 @@ export default {
     max-width: 100%;
     max-height: fit-content;
   }
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
+    background: none;
+  }
 }
 </style>