优化查看大图

src/views/components/carouselChart.vue

@@ -8,23 +8,16 @@
           bigPicPath.indexOf('nopic') == -1 &&
           bigPicPath.indexOf('videos') == -1
         "
-        :style="bigPicPath ? 'backgroundImage:url(' + bgbigPath + ')' : ''"
+        :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
       >
-        <!--  @click="handleBigPicbox(bigPicPath)"  -->
+        <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
         <div
           class="nosee"
-          :style="'backgroundImage:url(' + bgbigPath + ')'"
+          :style="'backgroundImage:url(' + bigPicPath + ')'"
         ></div>
-        <div class="bigimgView" v-viewer="OptionssalseImg">
+        <div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
-          <img
+          <img ref="picJpg" class="animImg" :src="bigPicPath" />
-            ref="picJpg"
-            class="animImg"
-            :src="bigPicPath"
-            :data-source="bigPicPath"
-            @click="showbigpicPath(bigPicPath)"
-          />
         </div>
-
         <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
         <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
       </div>
@@ -45,28 +38,6 @@
         />
       </div>
 
-      <div
-        v-if="
-          showBigpic &&
-          bigPicPath.indexOf('nopic') == -1 &&
-          bigPicPath.indexOf('videos') == -1
-        "
-        class="showPic"
-        @click="closePic"
-      >
-        <div class="picboxI">
-          <img
-            class="maskPic"
-            :src="bigPicPath"
-            ref="bigImage"
-            width="100%"
-            height="100%"
-          />
-        </div>
-        <div class="viewClose">
-          <i @click="closePic" class="el-icon-close"></i>
-        </div>
-      </div>
       <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
         <i class="el-icon-arrow-left"></i>
       </div>
@@ -182,6 +153,30 @@
         <i class="el-icon-arrow-right"></i>
       </div>
     </div>
+
+    <!-- 点击出现大图 -->
+    <div v-if="showBigpic" class="showPic" v-loading="canvasloading">
+      <div
+        class="picboxI"
+        @mousewheel.prevent="rollImg"
+        :style="{
+          transform: 'scale(' + zoomD + ')',
+        }"
+        @mousedown="move"
+      >
+        <img
+          @load="imgOnload"
+          id="bigimg"
+          ref="bigimgref"
+          class="maskPic img"
+          :src="bigImgPath"
+        />
+        <!-- <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas> -->
+      </div>
+      <div class="viewClose" @click="closePic">
+        <i class="el-icon-close"></i>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -228,13 +223,16 @@ export default {
       showBigpic: false,
       flagline: true,
       markEnable: "",
+      zoomD: 1,
+      canvasloading: false,
+      bigImgPath: "",
     };
   },
   mounted() {
     console.log(this.terminalPhoto);
     this.mediaType = this.terminalPhoto[0].mediaType;
     this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-    this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
+
     // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
     this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
     this.total = this.terminalPhoto.length / this.pagesize;
@@ -261,26 +259,97 @@ export default {
   watch: {
     terminalPhoto: function (newVal, oldVal) {
       this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-      this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
+
       this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
       this.total = this.terminalPhoto.length / this.pagesize;
     },
   },
   created() {},
   methods: {
-    showbigpicPath(data) {
+    // showbigpicPath(data) {
-      console.log(data);
+    //   console.log(data);
-      if (data.includes("!")) {
+    //   if (data.includes("!")) {
-        this.bigPicPath = data.substring(0, data.length - 9);
+    //     this.bigPicPath = data.substring(0, data.length - 9);
+    //   } else {
+    //     this.bigPicPath = data;
+    //     this.bgbigPath = data;
+    //   }
+
+    //   console.log(this.bigPicPath);
+    // },
+    // handleBigPicbox() {
+    //   this.showBigpic = true;
+    // },
+    //移动demo
+    move(e) {
+      console.log(e);
+      e.preventDefault();
+      // 获取元素
+      var personBox = document.querySelector(".picboxI");
+      var img = document.querySelector(".img");
+      var x = e.pageX - img.offsetLeft;
+      var y = e.pageY - img.offsetTop;
+      // 添加鼠标移动事件
+      personBox.addEventListener("mousemove", move);
+      console.log(personBox.addEventListener("mousemove", move));
+      console.log(personBox.style);
+      function move(e) {
+        console.log(personBox.style.left);
+        personBox.style.left = e.pageX - x + "px";
+        personBox.style.top = e.pageY - y + "px";
+      }
+      // 添加鼠标抬起事件，鼠标抬起，将事件移除
+      img.addEventListener("mouseup", function () {
+        personBox.removeEventListener("mousemove", move);
+      });
+      // 鼠标离开父级元素，把事件移除
+      personBox.addEventListener("mouseout", function () {
+        personBox.removeEventListener("mousemove", move);
+      });
+    },
+    // 缩放图片
+    rollImg(e) {
+      let direction = e.deltaY > 0 ? "down" : "up";
+      if (direction === "up") {
+        // 滑轮向上滚动
+        this.large();
       } else {
-        this.bigPicPath = data;
+        // 滑轮向下滚动
-        this.bgbigPath = data;
+        this.Small();
       }
-
-      console.log(this.bigPicPath);
     },
-    handleBigPicbox() {
+    //大
+    large() {
+      this.$nextTick(() => {
+        if (this.zoomD < 6) {
+          this.zoomD += 0.1;
+        }
+        document.querySelector(
+          ".picboxI"
+        ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
+      });
+    },
+    // 小
+    Small() {
+      this.$nextTick(() => {
+        if (this.zoomD > 0.3) {
+          this.zoomD -= 0.1;
+        }
+        document.querySelector(
+          ".picboxI"
+        ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
+      });
+    },
+    imgOnload() {
+      console.log("加载完成");
+      this.canvasloading = false;
+    },
+    //放大图
+    handleBigPicbox(val) {
+      console.log(val);
+      //this.canvasloading = true;
       this.showBigpic = true;
+      this.bigImgPath = val.substring(0, val.length - 9);
     },
     closePic(data) {
       console.log(data);
@@ -347,7 +416,7 @@ export default {
       );
 
       this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
-      this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
+
       this.videopath = this.fiveList[this.activeSmall].thumb;
     },
     //大图点击左侧切换图片
@@ -355,7 +424,7 @@ export default {
       this.bigNum--; //执行下一张
       this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
       this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
-      this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
+
       this.activeSmall--;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       console.log(this.page);
@@ -383,7 +452,7 @@ export default {
       this.bigNum++; //执行下一张
       this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
       this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
-      this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
+
       this.activeSmall++;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       if (this.activeSmall > 4) {
@@ -412,7 +481,7 @@ export default {
       this.activeSmall = index;
       this.mediaType = row.mediaType;
       this.bigPicPath = row.path + "!1366x768";
-      this.bgbigPath = row.path + "!1366x768";
+      // this.bgbigPath = row.path + "!1366x768";
       getCoordinate({
         channelId: row.channelId,
         needPic: "1",
@@ -492,58 +561,6 @@ export default {
   height: calc(100% - 32px);
   box-sizing: border-box;
 
-  .showPic {
-    position: fixed;
-    background-color: rgba(0, 0, 0, 0.5);
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    right: 0;
-    top: 0;
-    z-index: 9999;
-    display: flex;
-    cursor: pointer;
-    .picboxI {
-      position: relative;
-      max-width: 1366px;
-      max-height: 768px;
-      margin: auto;
-      animation-name: scaleDraw;
-      /*关键帧名称*/
-      animation-timing-function: ease;
-      /*动画的速度曲线*/
-      animation-iteration-count: 1;
-      /*动画播放的次数*/
-      animation-duration: 0.65s;
-      overflow: hidden;
-      border: 2px solid #f00;
-      img {
-        width: 100%;
-        height: 100%;
-        margin: auto;
-      }
-    }
-    .viewClose {
-      -webkit-app-region: no-drag;
-      background-color: rgba(0, 0, 0, 0.5);
-      border-radius: 50%;
-      cursor: pointer;
-      height: 80px;
-      overflow: hidden;
-      position: absolute;
-      right: -40px;
-      top: -40px;
-      transition: background-color 0.15s;
-      width: 80px;
-      .el-icon-close {
-        bottom: 16px;
-        left: 16px;
-        position: absolute;
-        color: #fff;
-        font-size: 18px;
-      }
-    }
-  }
   .picTop {
     width: 100%;
     height: 80%;
@@ -741,6 +758,75 @@ export default {
       right: 16px;
     }
   }
+  //放大图
+  .showPic {
+    position: fixed;
+    background-color: rgba(0, 0, 0, 50%);
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    right: 0;
+    top: 0;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+    .picboxI {
+      position: relative;
+      width: 85%;
+      height: 85%;
+      margin: auto;
+      animation-name: scaleDraw;
+      /*关键帧名称*/
+      animation-timing-function: ease;
+      /*动画的速度曲线*/
+      animation-iteration-count: 1;
+      /*动画播放的次数*/
+      animation-duration: 0.65s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+
+        margin: auto;
+        position: absolute;
+        cursor: grab;
+      }
+      .myCanvas {
+        position: absolute;
+        // top: 0;
+        // left: 0;
+        max-width: 100%;
+        max-height: 100%;
+        margin: 0 auto;
+        cursor: pointer;
+        pointer-events: none;
+      }
+    }
+    .viewClose {
+      -webkit-app-region: no-drag;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      cursor: pointer;
+      height: 80px;
+      overflow: hidden;
+      position: absolute;
+      right: -40px;
+      top: -40px;
+      transition: background-color 0.15s;
+      width: 80px;
+      .el-icon-close {
+        bottom: 16px;
+        left: 16px;
+        position: absolute;
+        color: #fff;
+        font-size: 18px;
+      }
+    }
+  }
 }
 @keyframes scaleDraw {
   /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
@@ -753,6 +839,5 @@ export default {
     transform: scale(1);
   }
 }
-
 // https://v1.github.surmon.me/vue-awesome-swiper/
 </style>