图片放大镜

    <!-- 放大后的图片 -->
    <div
      v-show="!isOutside"
      class="large"
      :style="[
        {
          backgroundImage: `url(${pictures[currentIndex]})`,
          backgroundPosition: `${bg.x}px ${bg.y}px`,
        },
      ]"
    ></div>
    <!-- 商品图片 -->
    <div class="middle" ref="target">
      <img :src="pictures[currentIndex]" alt="" />
      <!-- 蒙层 -->
      <div
        v-show="!isOutside"
        class="layer"
        :style="{ left: `${position.left}px`, top: `${position.top}px` }"
      ></div>
    </div>
    

使用vueuse中的useMouseInElement来监控xy坐标变化

    import { useMouseInElement } from '@vueuse/core' 
    
    const position = reactive({ left: 0, top: 0 })
    const { elementX, elementY, isOutside } = useMouseInElement(target)
    // 大图放大比例数据
    const bg = reactive({ x: 0, y: 0 })
    //监控鼠标变化控制遮罩层left top 
    watch([elementX, elementY], () => {
      if (elementX.value < 100) {
        position.left = 0
      } else if (elementX.value > 300) {
        position.left = 200
      } else {
        position.left = +elementX.value - 100
      }
      if (elementY.value < 100) {
        position.top = 0
      } else if (elementY.value > 300) {
        position.top = 200
      } else {
        position.top = +elementY.value - 100
      }
      //修改大图的imageposition
      bg.x = -position.left * 2
      bg.y = -position.top * 2
    })