Vue3 を使用して虫眼鏡効果を実現する方法の例

vueuse/core 5.3.0 をインストールします

<テンプレート>
  <div class="goods-image">
    <!-- 大きな画像をプレビュー -->
    <div class="large" :style='[{backgroundImage: `url(${images[currIndex]})`}, bgPosition]' v-show='isShow'></div>
    <div class="middle" ref='target'>
      <!-- 左側に大きな画像 -->
      <img :src="画像[currIndex]" alt="">
      <!-- マスクレイヤー-->
      <div class="layer" :style='[position]' v-show='isShow'></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' から { ref, watch, reactive } をインポートします。
'@vueuse/core' から { useMouseInElement } をインポートします。

エクスポートデフォルト{
  名前: 'EnlargeImages',
  小道具: {
    画像:
      タイプ: 配列、
      デフォルト: () => []
    }
  },
  セットアップ（小道具）{
    定数 currIndex = ref(0)
    定数ターゲット = ref(null)
    定数isShow = ref(false)
    //マスクレイヤーの座標 const position = reactive({
      左: 0,
      トップ: 0
    })
    // 背景画像の位置を制御する const bgPosition = reactive({
      背景位置X: 0,
      背景位置Y: 0
    })
    const { elementX, elementY, isOutside } = useMouseInElement(target)
    // マウスの動きの情報を監視する watch([elementX, elementY, isOutside], () => {
      // 値が変わるたびに新しいデータを読み取ります isShow.value = !isOutside.value
      // マウスが画像領域外にあるため、座標を計算する必要はありません if (isOutside.value) return
      // 水平方向if (elementX.value < 100) {
        // 左境界の位置.left = 0
      } そうでなければ (要素Xの値 > 300) {
        // 右境界の位置.left = 200
      } それ以外 {
        // 中間の状態 position.left = elementX.value - 100
      }
      // 垂直方向if (elementY.value < 100) {
        // 上端の位置.top = 0
      } そうでなければ (要素Yの値 > 300) {
        // 下境界線の位置.top = 200
      } それ以外 {
        // 中間の状態 position.top = elementY.value - 100
      }
      // console.log(要素Xの値、要素Yの値、isOutsideの値)
      // プレビュー背景の位置を計算します bgPosition.backgroundPositionX = -position.left * 2 + 'px'
      bgPosition.backgroundPositionY = -position.top * 2 + 'px'
      // 左マスクレイヤーの位置を計算する position.left += 'px'
      位置.top += 'px'
    })
    戻り値: { currIndex, target, isShow, position, bgPosition }
  }
}
</スクリプト>
<style スコープ lang="less">
.商品画像{
  ボックスのサイズ: 境界線ボックス;
  幅: 480ピクセル;
  高さ: 400px;
  位置: 相対的;
  ディスプレイ: フレックス;
  zインデックス: 500;
   画像 {
        幅: 100%;
        高さ: 100%;
    }
  。大きい {
    位置: 絶対;
    上: 0;
    左: 410px;
    幅: 400ピクセル;
    高さ: 400px;
    ボックスの影: 0 0 10px rgba(0, 0, 0, 0.1);
    背景繰り返し: 繰り返しなし;
    背景サイズ: 800px 800px;
    背景色: #f8f8f8;
  }
  。真ん中 {
    幅: 400ピクセル;
    高さ: 400px;
    背景: #f5f5f5;
    位置: 相対的;
    カーソル: 移動;
    .レイヤー{
      幅: 200ピクセル;
      高さ: 200px;
      背景: rgba(0, 0, 0, 0.2);
      左: 0;
      上: 0;
      位置: 絶対;
    }
  }
  。小さい {
    マージン: 0;
    パディング: 0;
    幅: 80ピクセル;
    li {
      幅: 68px;
      高さ: 68px;
      マージン: 10px;
      リストスタイル: なし;
      カーソル: ポインタ;
      &:ホバー、
      ＆。アクティブ {
        境界線: 2px実線 #27ba9b;
      }
    }
  }
}
</スタイル>

'./enlarge-images.vue' から EnlargeImages をインポートします。

エクスポートデフォルト{
  インストール（アプリ）{
    app.component(EnlargeImages.name、EnlargeImages) のコンポーネント。
  }
}

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします
'./store' からストアをインポートします
// 独自のカプセル化 import myUI from './components'

createApp(App).use(store).use(router).use(myUI).mount('#app')

<テンプレート>
  <div class="home-banner">
    <!-- 虫眼鏡効果-->
    <拡大画像:images="画像"/>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'アプリ'、
  設定（） {
    定数イメージ = [
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fcloud.jpeg',
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fground.jpeg',
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fnight.jpeg',
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fstreet.jpeg',
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fsun.jpeg'
    ]

    {画像}を返す
  }
}
</スクリプト>

<スタイル lang="less">
.ホームバナー{
  幅: 1000ピクセル;
  マージン: 50px 自動;
}
</スタイル>