效果展示

image.png
鼠标进入右侧小图时显示大图
image.png
鼠标进入左侧图，显示遮罩和右侧放大区
右侧放大区，显示左侧遮罩层内容

思路

获取鼠标在左侧的位置 ：通过vueuse的useMouseInElement方法获取

  1. // elementX 鼠标在当前元素x轴的位置
  2. // elementY 鼠标在当前元素y轴的位置
  3. // isOutside 鼠标是否在当前元素外  在外面为true 在内部为fales
  4. // target 当前被监控的元素
  5. const { elementX, elementY, isOutside } = useMouseInElement(target)

放大区css控制
1：通过设背景大小 background-size: x,y 是其盒子的二倍 达到放大效果
2：根据左侧鼠标位置动态设置背景位置 达到移动效果
background-position-x,background-position-y

代码

  1. <template>
  3.   <div class="goods-image" >
  4.     <!-- 被放大的图片  style 控制显示的图片 bgPosition 控制显示的图片位置-->
  5.     <div v-show="!isOutside" class="large" :style="{backgroundImage: `url(${images[curIdx]})`, ...bgPosition}"></div>
  6.     <!-- 左边的大图 -->
  7.     <div class="middle" ref="target">
  8.       <img :src="images[curIdx]" alt="">
  9.       <!-- 放大镜的遮罩层 -->
  10.       <div v-show="!isOutside" class="layer" :style="layerStyle"></div>
  11.     </div>
  12.     <!-- 右边的小图 -->
  13.     <ul class="small">
  14.       <!-- 鼠标移入时小图时改变大图显示的索引 -->
  15.       <li
  16.       v-for="(url,idx) in images"
  17.       :key="idx"
  18.       :class="{active:curIdx==idx}"
  19.       @mouseenter="curIdx=idx"
  20.       >
  21.         <img :src="url" alt="">
  22.       </li>
  23.     </ul>
  24.   </div>
  25. </template>
  26. <script>
  27. import { ref, watch, reactive } from 'vue'
  28. // 导入 useMouseInElement
  29. import { useMouseInElement } from '@vueuse/core'
  30. export default {
  31.   props: { images: { type: Array, default: () => [] } },
  33.   setup () {
  34.   // 监控左侧大图 鼠标的移动
  35.     const target = ref(null)
  36.     // elementX 鼠标在x轴的移动  elementY 鼠标在y轴的移动 isOutside鼠标是否移出当前监控元素 是为true
  37.     const { elementX, elementY, isOutside } = useMouseInElement(target)
  38.     // 定义 控制放大镜遮罩的位置的变量
  39.     const layerStyle = reactive({
  40.       top: 0,
  41.       left: 0
  42.     })
  44.     // 定义被放大图背景位置
  45.     const bgPosition = reactive({
  46.       'background-position-x': 0, // 精准的css样式的名字，方便直接使用
  47.       'background-position-y': 0
  48.     })
  49.     // 监控鼠标的位置变化
  50.     watch([elementX, elementY, isOutside], () => {
  51.       // 计算遮罩位置 鼠标在遮罩中间位置 鼠标位置减遮罩宽高的一半
  52.       let top = elementY.value - 100
  53.       let left = elementX.value - 100
  54.   // 限制鼠标在当前盒子内  盒子大小400*400
  55.       if (top > 200) top = 200
  56.       if (left > 200) left = 200
  57.       if (top < 0) top = 0
  58.       if (left < 0) left = 0
  59.   // 传递遮罩位置
  60.       layerStyle.top = top + 'px'
  61.       layerStyle.left = left + 'px'
  62.   // 计算被放大图片的背景位置  初始位置显示左上角 向左移为负 倍数为2
  63.       bgPosition['background-position-x'] = (-2 * left) + 'px'
  64.       bgPosition['background-position-y'] = (-2 * top) + 'px'
  66.       console.log(layerStyle.top, layerStyle.left)
  67.     })
  69.     // 当前图片的下标
  70.     const curIdx = ref(0)
  71.     return { curIdx, elementX, elementY, isOutside, target, layerStyle, bgPosition }
  72.   }
  73. }
  74. </script>
  76. <style scoped lang="less">
  77. .goods-image {
  78.   width: 480px;
  79.   height: 400px;
  80.   position: relative;
  81.   display: flex;
  82.   z-index: 500;
  83.   .large {
  84.     position: absolute;
  85.     top: 0;
  86.     left: 412px;
  87.     width: 400px;
  88.     height: 400px;
  89.     box-shadow: 0 0 10px rgba(0,0,0,0.1);
  90.     background-repeat: no-repeat;
  91.     background-size: 800px 800px;
  92.     background-color: #f8f8f8;
  93.   }
  94.   .middle {
  95.     width: 400px;
  96.     height: 400px;
  97.     background: #f5f5f5;
  98.     position: relative;
  99.     cursor: move;
  100.     .layer {
  101.       width: 200px;
  102.       height: 200px;
  103.       background: rgba(0,0,0,.2);
  104.       left: 0;
  105.       top: 0;
  106.       position: absolute;
  107.     }
  108.   }
  109.   .small {
  110.     width: 80px;
  111.     li {
  112.       width: 68px;
  113.       height: 68px;
  114.       margin-left: 12px;
  115.       margin-bottom: 15px;
  116.       cursor: pointer;
  117.       &:hover,&.active {
  118.         border: 2px solid @xtxColor;
  119.       }
  120.     }
  121.   }
  122. }
  123. </style>