Vue3实现图片放大镜效果

<template>  <div class="goods-image">    <!-- 大图容器 -->    <div      class="large"      :style="[        {          backgroundImage: `url(${imageList[curId]})`,          backgroundPositionX: position.backgroundPositionX,          backgroundPositionY: position.backgroundPositionY,        },      ]"      v-if="isShow"    ></div>    <div class="middle" ref="target">      <img :src="imageList[curId]" alt="" />      <!-- 蒙层容器 -->      <div class="layer" :style="{ left: left + 'px', top: top + 'px' }" v-if="isShow"></div>    </div>    <ul class="small">      <li        v-for="(img, i) in imageList"        :key="i"        @mouseenter="curId = i"        :class="{ active: curId === i }"      >        <img :src="img" alt="" />      </li>    </ul>  </div></template> <script>import { reactive, ref, watch } from 'vue'import { useMouseInElement } from '@vueuse/core'export default {  name: 'GoodsImage',  props: {    imageList: {      type: Array,      default: () => {        return []      }    }  },  setup () {    const curId = ref(0)    const target = ref(null)    // elementX: 鼠标距离左侧的偏移值    // elementY：表表距离顶部的偏移值    // isOutside: 是否在容器外部  外部true  内部 false    const { elementX, elementY, isOutside } = useMouseInElement(target)    const left = ref(0) // 滑块距离左侧的距离    const top = ref(0) // 滑块距离顶部的距离    const isShow = ref(false) // 显示大图和蒙层图的显示和隐藏    const position = reactive({ // 大图显示的位置,默认是0      backgroundPositionX: 0,      backgroundPositionY: 0    })    watch(      // 监听的对象      [elementX, elementY, isOutside],      () => {        if (elementX.value < 100) {          // 左侧最小距离          left.value = 0        }        if (elementX.value > 300) {          left.value = 200        }        if (elementX.value > 100 && elementX.value < 300) {          left.value = elementX.value - 100        }        if (elementY.value < 100) {          // 左侧最小距离          top.value = 0        }        if (elementY.value > 300) {          top.value = 200        }        if (elementY.value > 100 && elementY.value < 300) {          top.value = elementY.value - 100        }        // 控制背景图移动        // 1. 蒙层移动的方向和大图背景移动的方向是相反的        // 2. 蒙层和大图由于面积大小是1:2的 蒙层每移动一个像素  大图移动俩个像素        // backgrondPosition：x,y;        position.backgroundPositionX = -left.value * 2 + 'px'        position.backgroundPositionY = -top.value * 2 + 'px'         // 当isOutside的值发生变化的时候,立刻取反赋值给isShow        // isOutside: 是否在容器外部  外部true  内部 false        isShow.value = !isOutside.value      },      {}    )    return {      curId,      target,      left,      top,      position,      isShow    }  }}</script>