Vue3は画像拡大鏡効果を実現します

<テンプレート>
  <div class="goods-image">
    <!-- 大きな画像コンテナ -->
    <div
      クラス="large"
      :スタイル="[
        {
          背景画像: `url(${imageList[curId]})`,
          背景位置X: position.backgroundPositionX、
          背景位置Y: position.backgroundPositionY、
        },
      ]"
      v-if="isShow"
    </div>
    <div class="middle" ref="target">
      <img :src="画像リスト[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) が imageList 内にあります"
        :key="i"
        @mouseenter="curId = i"
        :class="{ アクティブ: curId === i }"
      >
        <img :src="画像" alt="" />
      </li>
    </ul>
  </div>
</テンプレート>
 
<スクリプト>
'vue' から { reactive, ref, watch } をインポートします。
'@vueuse/core' から { useMouseInElement } をインポートします。
エクスポートデフォルト{
  名前: 'GoodsImage',
  小道具: {
    画像リスト: {
      タイプ: 配列、
      デフォルト: () => {
        戻る []
      }
    }
  },
  設定 （） {
    定数curId = ref(0)
    定数ターゲット = 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
      背景位置X: 0,
      背景位置Y: 0
    })
    時計（
      //監視オブジェクト[elementX, elementY, isOutside]、
      () => {
        要素Xの値<100の場合{
          // 左の最小距離 left.value = 0
        }
        要素Xの値> 300の場合{
          左の値 = 200
        }
        要素Xの値> 100 && 要素Xの値< 300の場合{
          左の値 = 要素Xの値 - 100
        }
        要素Yの値<100の場合{
          // 左上の最小距離。値 = 0
        }
        要素Yの値> 300の場合{
          上位値 = 200
        }
        要素Yの値> 100 && 要素Yの値< 300) {
          上部の値 = 要素Yの値 - 100
        }
        // 背景画像の動きを制御します // 1. マスク レイヤーの移動方向は、背景画像の移動方向と逆になります // 2. マスク レイヤーと背景画像の面積比は 1:2 なので、マスク レイヤーが 1 ピクセル移動するごとに背景画像は 2 ピクセル移動します // backgrondPosition: x, y;
        position.backgroundPositionX = -left.value * 2 + 'px'
        位置.背景位置Y = -top.値 * 2 + 'px'
 
        // isOutsideの値が変わったら、すぐにそれを否定してisShowに代入します
        // isOutside: コンテナの外側か? 外側の場合は true、内側の場合は false
        isShow.value = !isOutside.value
      },
      {}
    ）
    戻る {
      curId、
      ターゲット、
      左、
      トップ、
      位置、
      表示
    }
  }
}
</スクリプト>