Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

<テンプレート>
  <div class="goods-image">
    <!-- 大きな画像をプレビュー -->
    <div class="large" v-show="show" :style="[{ backgroundImage: `url(${images[currIndex]})` }, bgPosition]"></div>
    <!-- 製品画像-->
    <div class="middle">
      <!-- 製品画像-->
      <img ref="target" :src="画像[currIndex]" alt="" />
      <!-- マウスが画像のマスクに入ります -->
      <div class="layer" v-show="show" :style="[位置]"></div>
    </div>
    <!-- サムネイル -->
    <ul class="small">
      <li v-for="(img, i) 画像内" :key="img" :class="{ active: i === currIndex }">
        <!-- 商品の大きな写真の隣にある小さな写真にマウスを移動すると、大きな写真が表示されます-->
        <img @mouseenter="currIndex = i" :src="img" alt="" />
      </li>
    </ul>
  </div>
</テンプレート>
<スクリプト>
'vue' から { reactive, ref, watch } をインポートします。
'@vueuse/core' から { useMouseInElement } をインポートします。
エクスポートデフォルト{
  名前: 'GoodsImage',
  小道具: {
    画像:
      タイプ: 配列、
      デフォルト: () => []
    }
  },
  セットアップ(プロパティ) {
    // プレビュー画像とマスクレイヤーの表示と非表示を制御します。const show = ref(false)
    // 商品画像に表示される画像を制御する const currIndex = ref(0)
    // ref は DOM 要素を取得します const target = ref(null)
    // 製品画像内のマスクされた半透明画像の座標位置を記録する const position = reactive({
      上: 0,
      残り: 0
    })
    // プレビュー画像内のマスクレイヤーで覆われた領域の座標位置を記録する const bgPosition = reactive({
      背景位置X: 0,
      背景位置Y: 0
    })
    // サードパーティの vueuse が提供するメソッド useMouseInElement は、特定の領域内のマウスの座標を取得します。const { elementX, elementY, isOutside } = useMouseInElement(target)
    // リスナーは、マウスが製品画像に入ったときの座標を監視して、マスクレイヤーとプレビュー画像の効果を操作します。watch([elementX, elementY, isOutside], () => {
      // isisOutside.value が true の場合、マウスがターゲット要素に入っていないことを意味します。false の場合、マウスがターゲット要素に入っていることを意味します。// true の場合、パフォーマンスの低下を避けるために座標は記録されません if (isOutside.value) {
        // マウスがターゲット要素に入らない場合、マスクレイヤーとプレビュー画像は表示されません。show.value = false
        戻る
      }
      // マウスがターゲット要素に入ると、マスクレイヤーとプレビュー画像が表示されます。show.value = true
      // マスクレイヤーのサイズと商品画像のサイズに基づいて境界値を決定します // 左の境界値（左、右）
      要素Xの値<100の場合{
        位置.左 = 0
      } そうでなければ (要素Xの値 > 300) {
        位置.左 = 200
      } それ以外 {
        位置.左 = 要素X.値 - 100
      }
      // 上部の境界値（上限と下限）
      要素Yの値<100の場合{
        位置.上 = 0
      } そうでなければ (要素Yの値 > 300) {
        位置.上 = 200
      } それ以外 {
        位置.top = 要素Y.値 - 100
      }
      // プレビュー画像内のマスクレイヤーで覆われた商品画像の部分の座標と単位 bgPosition.backgroundPositionY = -position.top * 2 + 'px'
      bgPosition.backgroundPositionX = -position.left * 2 + 'px'
      // マスク レイヤーは、商品画像の左上隅の座標に単位 position.top += 'px' を加えた座標を基準とします。
      位置.left += 'px'
    })
    // return { currIndex, show, target, position, bgPosition } を使用してテンプレートに戻ります
  }
}
</スクリプト>
<style スコープ lang="less">
.商品画像{
  幅: 480ピクセル;
  高さ: 400px;
  位置: 相対的;
  ディスプレイ: フレックス;
  zインデックス: 500;
  。大きい {
    位置: 絶対;
    上: 0;
    左: 412px;
    幅: 400ピクセル;
    高さ: 400px;
    ボックスの影: 0 0 10px rgba(0, 0, 0, 0.1);
    背景繰り返し: 繰り返しなし;
    背景サイズ: 800px 800px;
    背景色: #f8f8f8;
  }
  。真ん中 {
    幅: 400ピクセル;
    高さ: 400px;
    位置: 相対的;
    カーソル: 移動;
    .レイヤー{
      幅: 200ピクセル;
      高さ: 200px;
      背景: rgba(0, 0, 0, 0.2);
      左: 0;
      上: 0;
      位置: 絶対;
    }
  }
  。小さい {
    幅: 80ピクセル;
    li {
      幅: 68px;
      高さ: 68px;
      左マージン: 12px;
      下部マージン: 15px;
      カーソル: ポインタ;
      &:ホバー、
      ＆。アクティブ {
        境界線: 2px 実線 @xtxColor;
      }
    }
  }
}
</スタイル>