文章图片放大功能

src/views/bookShelf/articlePeruseDetail.vue

@@ -197,6 +197,7 @@
                 style="width: 100%; height: 100%"
                 :src="peruseDetail.content.backgroundImg"
                 fit="contain"
+                :preview-src-list="[peruseDetail.content.backgroundImg]"
               ></el-image>
             </div>
             <div

src/views/bookShelf/components/ImgPreview.vue

@@ -0,0 +1,129 @@
+<!--  -->
+<template>
+  <div class="img-preview-dialog">
+    <a class="img-preview-close" @click="closeImgPreview"
+      ><i class="el-icon-error"></i
+    ></a>
+    <div class="img-preview-inner">
+      <img
+        :src="imgPreviewSrc"
+        :style="{
+          marginTop:
+            this.imageHeightOri < this.imageHeight
+              ? -this.imageHeightOri / 2 + 'px'
+              : -this.imageHeight / 2 + 'px',
+          marginLeft:
+            this.imageWidthOri < this.imageWidth
+              ? -this.imageWidthOri / 2 + 'px'
+              : -imageWidth / 2 + 'px',
+        }"
+      />
+    </div>
+    <!-- <div class="img-preview-btn">
+      <i class="el-icon-zoom-out" @click="handleZoom('-')"></i>
+      <i class="el-icon-zoom-in" @click="handleZoom('+')"></i>
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["imgPreviewSrc", "imagePreviewWidth", "imagePreviewHeight"],
+  components: {},
+  data() {
+    return {
+      scale: 1,
+      imageWidthOri: window.innerWidth,
+      imageHeightOri: window.innerHeight,
+      imageHeight: this.imagePreviewHeight,
+      imageWidth: this.imagePreviewWidth, // 图片显示宽度
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    handleZoom(type) {
+      if (type === "-") {
+        if (this.scale > 0.2) {
+          this.scale = (this.scale - 0.2).toFixed(2) * 1;
+        }
+      } else {
+        this.scale = (this.scale + 0.2).toFixed(2) * 1;
+      }
+      this.imageWidth = this.imagePreviewWidth * this.scale;
+      this.imageHeight = this.imagePreviewHeight * this.scale;
+    },
+    closeImgPreview() {
+      this.$emit("closeImgPreview");
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.img-preview-dialog {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  .img-preview-close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    line-height: 1;
+    color: #fff;
+    background-color: #606266;
+    border-radius: 50%;
+    opacity: 0.8;
+    z-index: 1;
+  }
+  .img-preview-inner {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    img {
+      max-width: 100vw;
+      max-height: 100vh;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+    }
+  }
+  .img-preview-btn {
+    position: absolute;
+    bottom: 120px;
+    left: 50%;
+    margin-left: -50px;
+    width: 100px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    border-color: #fff;
+    border-radius: 22px;
+    font-size: 23px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    column-gap: 15px;
+  }
+}
+</style>

src/views/bookShelf/components/InnerTextSearch.vue

@@ -210,11 +210,13 @@
                 v-for="(itemI, indexI) in articleImg[index]"
                 :key="indexI"
               >
-                <img
-                  :src="itemI.src"
+                <el-image
                   :width="itemI.width"
                   :height="itemI.height"
-                />
+                  :src="itemI.src"
+                  fit="contain"
+                  :preview-src-list="[itemI.src]"
+                ></el-image>
               </figure>
             </template>
           </div>

src/views/bookShelf/components/LexicalType.vue

@@ -386,11 +386,13 @@
           </div>
           <template v-if="articleImg && articleImg[index]">
             <figure v-for="(itemI, indexI) in articleImg[index]" :key="indexI">
-              <img
-                :src="itemI.src"
+              <el-image
                 :width="itemI.width"
                 :height="itemI.height"
-              />
+                :src="itemI.src"
+                fit="contain"
+                :preview-src-list="[itemI.src]"
+              ></el-image>
             </figure>
           </template>
         </div>

src/views/bookShelf/components/NormalModel.vue

@@ -335,11 +335,19 @@
           </div>
           <template v-if="articleImg && articleImg[index]">
             <figure v-for="(itemI, indexI) in articleImg[index]" :key="indexI">
-              <img
+              <!-- <img
                 :src="itemI.src"
                 :width="itemI.width"
                 :height="itemI.height"
-              />
+                @click="imgShow($event, itemI.src)"
+              /> -->
+              <el-image
+                :width="itemI.width"
+                :height="itemI.height"
+                :src="itemI.src"
+                fit="contain"
+                :preview-src-list="[itemI.src]"
+              ></el-image>
             </figure>
           </template>
         </div>
@@ -350,6 +358,7 @@
         class="cn-content"
         v-html="articleInfo.art_content"
         :style="{ color: colorObj.contentColor, fontSize: wordFontsize + 'px' }"
+        @click="imgShow($event)"
       ></div>
     </template>
     <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
@@ -365,12 +374,20 @@
         :likeWord="likeWord"
       />
     </div>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      :imagePreviewHeight="imagePreviewHeight"
+      :imagePreviewWidth="imagePreviewWidth"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
 <script>
 import AudioLine from "@/components/common/AudioLine.vue";
 import Voicefullscreen from "./Voicefullscreen.vue";
+import ImgPreview from "./ImgPreview.vue";
 export default {
   name: "ArticleView",
   props: [
@@ -388,6 +405,7 @@ export default {
   components: {
     AudioLine,
     Voicefullscreen,
+    ImgPreview,
   },
   data() {
     return {
@@ -436,6 +454,10 @@ export default {
       sentIndex: -1, // 句子索引
       isFull: false,
       mathNum: Math.random().toString(36).substr(2),
+      imgPreviewDialog: false,
+      imgPreviewSrc: "",
+      imagePreviewWidth: 0,
+      imagePreviewHeight: 0,
     };
   },
   computed: {
@@ -450,6 +472,24 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    imgShow(e, src) {
+      const img = new Image();
+      if (src) {
+        img.src = src;
+        this.imgPreviewSrc = src;
+      } else if (e.target.tagName === "IMG") {
+        this.imgPreviewSrc = e.target.src;
+        img.src = e.target.src;
+      }
+      img.onload = () => {
+        this.imagePreviewWidth = img.width;
+        this.imagePreviewHeight = img.height;
+        this.imgPreviewDialog = true;
+      };
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
+    },
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
     },

src/views/bookShelf/components/NotesModel.vue

@@ -96,11 +96,13 @@
                 v-for="(itemI, indexI) in articleImg[index]"
                 :key="indexI"
               >
-                <img
-                  :src="itemI.src"
+                <el-image
                   :width="itemI.width"
                   :height="itemI.height"
-                />
+                  :src="itemI.src"
+                  fit="contain"
+                  :preview-src-list="[itemI.src]"
+                ></el-image>
               </figure>
             </template>
           </div>

src/views/bookShelf/components/PhraseModel.vue

@@ -239,11 +239,13 @@
           </div>
           <template v-if="articleImg && articleImg[index]">
             <figure v-for="(itemI, indexI) in articleImg[index]" :key="indexI">
-              <img
-                :src="itemI.src"
+              <el-image
                 :width="itemI.width"
                 :height="itemI.height"
-              />
+                :src="itemI.src"
+                fit="contain"
+                :preview-src-list="[itemI.src]"
+              ></el-image>
             </figure>
           </template>
         </div>

src/views/bookShelf/components/PrintModel.vue

@@ -237,11 +237,13 @@
                     :key="indexI"
                     style="text-align: center"
                   >
-                    <img
-                      :src="itemI.src"
+                    <el-image
                       :width="itemI.width"
                       :height="itemI.height"
-                    />
+                      :src="itemI.src"
+                      fit="contain"
+                      :preview-src-list="[itemI.src]"
+                    ></el-image>
                   </figure>
                 </template>
               </div>