feat:商品预览放大镜

src/components/globalComponents/aaa/index.vue

@@ -1,33 +1,29 @@
 <template>
   <div class="box">
-    <div
-      class="middle"
-      @mouseover="mouseOverAndOut('block')"
-      @mouseout="mouseOverAndOut('none')"
-      @mousemove="move($event)"
-    >
+    <div class="middle" @mouseover="mouseOverAndOut('block')" @mouseout="mouseOverAndOut('none')"
+      @mousemove="move($event)">
       <img :src="src" />
-      <div class="shade"></div>
+      <div class="shade" />
       <div class="big">
         <img :src="src" />
       </div>
     </div>
+
     <div class="list-box">
-      <ul>
-        <li
-          v-for="(s, si) in img_list"
-          @mouseenter="asd(si)"
-          :class="s !== src ? 'a1' : 'a2'"
-        >
-          <img :src="s" />
-        </li>
-      </ul>
+      <div :class="{ 'is-contoller': isShowController }">
+        <i class="el-icon-arrow-left prev" v-if="isShowController" @click="moveTo('prev')" />
+        <ul ref="horizontalRef">
+          <li v-for="(s, si) in img_list" @mouseenter="asd(si)" :class="s !== src ? 'a1' : 'a2'">
+            <img :src="s" />
+          </li>
+        </ul>
+        <i class="el-icon-arrow-right next" v-if="isShowController" @click="moveTo('next')" />
+      </div>
     </div>
   </div>
 </template>
 <script>
 import resToken from "@/mixins/resToken";
-// import { isnumber } from "@/utils/validate";
 export default {
   name: "aaa",
   props: ["pList"],
@@ -38,20 +34,10 @@ export default {
       src: "",
     };
   },
-  watch: {
-    // pList: function (val) {
-    //   // console.log(pList);
-    //   console.log(val);
-    //   // this.showModelThis = val;
-    //   // if (val) {
-    //   //   this.initForm();
-    //   // }
-    // },
-    // showModelThis(val) {
-    //   if (!val) {
-    //     this.$emit("cancel");
-    //   }
-    // },
+  computed: {
+    isShowController() {
+      return this.img_list.length >= 7;
+    }
   },
   created() {
     this.img_list = [];
@@ -73,40 +59,98 @@ export default {
       box.querySelector(".shade").style.display = val;
       box.querySelector(".big").style.display = val;
     },
-    move(evnt) {
-      const box = document.querySelector(".box");
-      const middle = box.querySelector(".middle");
-      const shade = box.querySelector(".shade");
-      const bigImg = box.querySelector(".big>img");
-      // 拖拽 - 获取光标位置
-      const e = evnt || window.event;
-      const x = e.pageX;
-      const y = e.pageY;
-      let l = x - box.offsetLeft - shade.clientWidth / 2;
-      if (l <= 0) {
-        l = 0;
+    moveTo(mode = "prev"){
+      const horizontalRef = this.$refs.horizontalRef;
+      const cW = horizontalRef.clientWidth;
+      const sW = horizontalRef.scrollWidth;
+      const sL = horizontalRef.scrollLeft;
+
+      if(mode === "next"){
+        // 前进越界
+        if(sL + cW >= sW ) return;
+        const offset = sW - (cW + sL) >= cW ? cW : sW - (cW + sL);
+        // horizontalRef.scrollTo({left:sL + offset,  behavior: 'smooth'})
+        this.animationToNext(sL,sL + offset)
       }
-      if (l >= middle.clientWidth - shade.clientWidth) {
-        l = middle.clientWidth - shade.clientWidth;
+
+      if(mode === "prev"){
+        // 后退越界
+        if(sL <= 0) return;
+        const offset = sL - cW >= 0 ? cW : sL;
+        // horizontalRef.scrollTo({ left:sL - offset, behavior: 'smooth'})
+        this.animationToPrev(sL,sL - offset)
       }
-      shade.style.left = l + "px";
-      let t = y - box.offsetTop - shade.clientHeight / 2;
-      if (t <= 0) {
-        t = 0;
+
+    },
+
+    animationToNext(source , current){
+      const horizontalRef = this.$refs.horizontalRef;
+      if(current === source){
+        return
       }
-      if (t >= middle.clientHeight - shade.clientHeight) {
-        t = middle.clientHeight - shade.clientHeight;
+
+      window.requestAnimationFrame(() => {
+        const cha = current - source > 10 ? 10 : current - source;
+
+        horizontalRef.scrollTo({ left:source + cha})
+        this.animationToNext(source + cha,current)
+      })
+    },
+    animationToPrev(source , current){
+      console.log(source,current)
+      const horizontalRef = this.$refs.horizontalRef;
+      if(current === source){
+        return
       }
-      shade.style.top = t + "px";
-      // 计算比例
-      const percentX = shade.offsetLeft / middle.clientWidth;
-      const percentY = shade.offsetTop / middle.clientHeight;
-      // 根据比例计算大图应该定位的值
-      const bigX = bigImg.clientWidth * percentX;
-      const bigY = bigImg.clientHeight * percentY;
-      // 将值设置给大图的定位
-      bigImg.style.left = -bigX + "px";
-      bigImg.style.top = -bigY + "px";
+
+      window.requestAnimationFrame(() => {
+        const cha = source - current > 10 ? 10 : source - current;
+        horizontalRef.scrollTo({ left:source - cha})
+        this.animationToPrev(source - cha,current)
+      })
+    },
+    move(evnt) {
+      //小图元素
+      const smallElm = document.querySelector(".middle")
+      // 大图元素
+      const bigElm = document.querySelector(".big")
+      // 大图图片元素
+      const bigImgElm = document.querySelector(".big>img");
+      //遮罩层元素
+      const maskElm = document.querySelector(".shade")
+      //得到找着相对于小图的偏移量 
+      const { left, top } = smallElm.getBoundingClientRect();
+      let s_left = evnt.pageX - maskElm.offsetWidth / 2 - left;
+      let s_top = evnt.pageY - maskElm.offsetHeight / 2 - top;
+
+      //计算遮罩层偏移量的临界值
+      let max_left = smallElm.offsetWidth - maskElm.offsetWidth;
+      let max_top = smallElm.offsetHeight - maskElm.offsetHeight;
+
+      //遮罩层移动右侧大图移动
+      let n = bigElm.offsetWidth / maskElm.offsetWidth;
+
+      // 遮罩跟随鼠标移动前判断：遮罩相对于小图的偏移量不能超出范围，超出范围要重新赋值（临界值在上边已经计算完成：max_left和max_top）
+      // 判断水平边界
+      if (s_left < 0) {
+        s_left = 0;
+      } else if (s_left > max_left) {
+        s_left = max_left
+      }
+      // 判断垂直边界
+      if (s_top <= 0) {
+        s_top = 0
+      } else if (s_top > max_top) {
+        s_top = max_top
+      }
+      // 遮罩层的left和top赋值
+      maskElm.style.left = s_left + "px"
+      maskElm.style.top = s_top + "px";
+      // bigImgElm的移动距离
+      let horizontal = -n * s_left;
+      let vertical = -n * s_top;
+      bigImgElm.style.left = horizontal + "px"
+      bigImgElm.style.top = vertical + "px"
     },
   },
 };
@@ -115,26 +159,30 @@ export default {
 <style lang="scss" scoped>
 .box {
   width: 100%;
-
   .middle {
     width: 400px;
     height: 400px;
     border: 1px solid #e8e8e8;
     position: relative;
-    & > img {
+    float: left;
+
+    &>img {
       display: inline;
       width: 400px;
       height: 400px;
     }
+
     .shade {
-      width: 100px;
-      height: 100px;
-      background: s(255, 255, 0, 0.5);
+      width: 200px;
+      height: 200px;
+      background-color: rgba(0, 0, 0, 0.3);
       position: absolute;
       left: 0;
       top: 0;
       display: none;
+      cursor: move;
     }
+
     .big {
       width: 400px;
       height: 400px;
@@ -144,6 +192,7 @@ export default {
       overflow: hidden;
       display: none;
       border: 1px solid #e8e8e8;
+
       img {
         width: 800px;
         height: 800px;
@@ -153,28 +202,59 @@ export default {
       }
     }
   }
+
   .list-box {
-    width: 100%;
+    width: 400px;
     margin: 10px 0 0 0;
+    box-sizing: border-box;
 
-    ul {
-      width: 100%;
-      overflow: hidden;
-      li {
-        float: left;
+    // .is-contoller {
+    // padding-left: 15px;
+    // padding-right: 15px;
+    // }
 
-        margin: 0 5px 0 0;
-        &.a1 {
-          border: 2px solid transparent;
-        }
-        &.a2 {
-          border: 2px solid #f00;
-        }
+    div {
+      width: 400px;
+      display: flex;
+      margin-top: 10px;
+      position: relative;
+      margin-left: 0px;
+      justify-content: flex-start;
+
+
+      .prev,
+      .next {
+        font-size: 16px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        cursor:pointer;
+      }
+
+      ul {
+        display: flex;
+        overflow: hidden;
+        scroll-bahavior: smooth;
+        // width: 100%;
+        flex:1;
+
+        li {
+          margin: 0 5px 0 0;
+
+          &.a1 {
+            border: 2px solid transparent;
+          }
+
+          &.a2 {
+            border: 2px solid #f00;
+          }
 
-        img {
-          float: left;
-          width: 50px;
-          height: 50px;
+          img {
+            float: left;
+            width: 50px;
+            height: 50px;
+            cursor: pointer;
+          }
         }
       }
     }

src/views/goodStore/goodsCost/components/goodPreview.vue

@@ -3,7 +3,7 @@
     <el-col :span="24"
       >
       <div class="good-img">
-      <aaa :pList="sitem && sitem.good_img ? sitem.good_img : ''" />
+        <aaa :pList="sitem && sitem.good_img + testHiddenString ? sitem.good_img : ''" />
       </div>
       <div class="good-img2">
         商品参数区域
@@ -22,7 +22,9 @@ export default {
   name: "goodPreview",
   props: ["sitem", "newTime"],
   data() {
-    return {};
+    return {
+      testHiddenString:',http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/02_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/主图1_20230917114404.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/主图2_20230917114405.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/主图3_20230917114405.jpg'
+    };
   },
   watch: {
     // newTime: function (val) {