Vue3 カプセル化された虫眼鏡コンポーネントのサンプルコード

<テンプレート>
  <div class="goods-image">
    <div class="middle">
      <img :src="画像[currIndex]" alt="">
    </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 } をインポートします
エクスポートデフォルト{
  名前: 'GoodsImage',
  小道具: {
    画像:
      タイプ: 配列、
      デフォルト: () => []
    }
  },
  セットアップ（小道具）{
    定数 currIndex = ref(0)
    { currIndex } を返す
  }
}
</スクリプト>
<style スコープ lang="less">
.商品画像{
  幅: 480ピクセル;
  高さ: 400px;
  位置: 相対的;
  ディスプレイ: フレックス;
  。真ん中 {
    幅: 400ピクセル;
    高さ: 400px;
    背景: #f5f5f5;
  }
  。小さい {
    幅: 80ピクセル;
    li {
      幅: 68px;
      高さ: 68px;
      左マージン: 12px;
      下部マージン: 15px;
      カーソル: ポインタ;
      &:hover,&.active {
        境界線: 2px 実線 @xtxColor;
      }
    }
  }
}
</スタイル>

<テンプレート>
  <div class="goods-image">
+ // 右側の大きな画像レイアウト効果を実現します（背景画像を4倍に拡大します）
+ <div class="large" :style="[{backgroundImage:`url(${images[currIndex]})`}]"></div>
    <div class="middle">
      <img :src="画像[currIndex]" alt="">
+ // 移動するマスク コンテナーを準備します + <div class="layer"></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 } をインポートします
エクスポートデフォルト{
  名前: 'GoodsImage',
  小道具: {
    画像:
      タイプ: 配列、
      デフォルト: () => []
    }
  },
  セットアップ（小道具）{
    定数 currIndex = ref(0)
    { currIndex } を返す
  }
}
</スクリプト>
<style スコープ lang="less">
.商品画像{
  幅: 480ピクセル;
  高さ: 400px;
  位置: 相対的;
  ディスプレイ: フレックス;
+ zインデックス: 500;
+ // 右大画像スタイル+ .large {
+ 位置: 絶対;
+ 上: 0;
+ 左: 412px;
+ 幅: 400px;
+ 高さ: 400px;
+ ボックスシャドウ: 0 0 10px rgba(0,0,0,0.1);
+ 背景繰り返し: 繰り返しなし;
+ 背景サイズ: 800px 800px;
+ 背景色: #f8f8f8;
+ }
  。真ん中 {
    幅: 400ピクセル;
    高さ: 400px;
    背景: #f5f5f5;
+ 位置: 相対的;
+ カーソル: 移動;
+ // マスクスタイル+ .layer {
+ 幅: 200px;
+ 高さ: 200px;
+ 背景: rgba(0,0,0,.2);
+ 左: 0;
+ 上: 0;
+ 位置: 絶対;
+ }
  }
  。小さい {
    幅: 80ピクセル;
    li {
      幅: 68px;
      高さ: 68px;
      左マージン: 12px;
      下部マージン: 15px;
      カーソル: ポインタ;
      &:hover,&.active {
        境界線: 2px 実線 @xtxColor;
      }
    }
  }
}
</スタイル>

'@vueuse/core' から { useMouseInElement } をインポートします。
const { elementX, elementY, isOutside } = useMouseInElement(target)

<div v-if="isShow" class="large" :style="[{ backgroundImage: `url(${images[currIndex]})` }, bgPosition]"></div>
<div class="middle" ref="target">
   <img :src="画像[currIndex]" alt="" />
   <div class="layer" v-if="isShow" :style="[位置]"></div>
</div>

設定 （） {
// 監視対象領域 const target = ref(null)
// マスクレイヤーとプレビュー画像の表示と非表示を制御します const isShow = ref(false)
// マスクの座標を定義する const position = reactive({
      左: 0,
      トップ: 0
})
// 右側のプレビュー画像の座標 const bgPosition = reactive({
      背景位置X: 0,
      背景位置Y: 0
})

戻り値: { position, bgPosition, target, isShow }
}

const { elementX, elementY, isOutside } = useMouseInElement(target)
  // リスナーに基づいて値の変更をリッスンします watch([elementX, elementY, isOutside], () => {
    // フラグで表示と非表示を制御する isShow.value = !isOutside.value
    if (isOutside.value) を返す
    // X軸座標範囲制御 if (elementX.value < 100) {
      // 左側の position.left = 0
    } そうでなければ (要素Xの値 > 300) {
      // 右側の position.left = 200
    } それ以外 {
      // 中央の位置.left = elementX.value - 100
    }
    // Y方向の座標範囲制御 if (elementY.value < 100) {
      位置.上 = 0
    } そうでなければ (要素Yの値 > 300) {
      位置.上 = 200
    } それ以外 {
      位置.top = 要素Y.値 - 100
    }
    // プレビュー画像の移動距離を計算します bgPosition.backgroundPositionX = -position.left * 2 + 'px'
    bgPosition.backgroundPositionY = -position.top * 2 + 'px'
    // マスクレイヤーの位置を計算する position.left = position.left + 'px'
    position.top = position.top + 'px'
  })

<テンプレート>
  <div class="goods-image">
    <div v-if="isShow" class="large" :style="[{ backgroundImage: `url(${images[currIndex]})` }, bgPosition]"></div>
    <div class="middle" ref="target">
      <img :src="画像[currIndex]" alt="" />
      <div class="layer" v-if="isShow" :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' から { ref, watch, reactive } をインポートします。
'@vueuse/core' から { useMouseInElement } をインポートします。
エクスポートデフォルト{
  名前: 'GoodsImage',
  小道具: {
    画像:
      タイプ: 配列、
      デフォルト: () => []
    }
  },
  セットアップ（小道具）{
    定数 currIndex = ref(0)
    定数ターゲット = ref(null)
    定数isShow = ref(false)
    const 位置 = リアクティブ({
      左: 0,
      トップ: 0
    })
    const bgPosition = リアクティブ({
      背景位置X: 0,
      背景位置Y: 0
    })
    const { elementX, elementY, isOutside } = useMouseInElement(target)
    watch([要素X, 要素Y, isOutside], () => {
      isShow.value = !isOutside.value
      if (isOutside.value) を返す
      要素Xの値<= 100の場合{
        位置.左 = 0
      } そうでない場合 (要素Xの値 >= 300) {
        位置.左 = 200
      } それ以外 {
        位置.左 = 要素X.値 - 100
      }
      要素Yの値<= 100の場合{
        位置.上 = 0
      } そうでない場合 (要素Yの値 >= 300) {
        位置.上 = 200
      } それ以外 {
        位置.top = 要素Y.値 - 100
      }
      bgPosition.backgroundPositionX = -position.left * 2 + 'px'
      bgPosition.backgroundPositionY = -position.top * 2 + 'px'
      位置.left += 'px'
      位置.top += 'px'
    })
    戻り値: { currIndex, target, isShow, 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;
    背景: #f5f5f5;
     位置: 相対的;
    カーソル: 移動;
    .レイヤー{
      幅: 200ピクセル;
      高さ: 200px;
      背景: rgba(0,0,0,.2);
      左: 0;
      上: 0;
      位置: 絶対;
    }
  }
  。小さい {
    幅: 80ピクセル;
    li {
      幅: 68px;
      高さ: 68px;
      左マージン: 12px;
      下部マージン: 15px;
      カーソル: ポインタ;
      &:ホバー、
      ＆。アクティブ {
        境界線: 2px 実線 @xtxColor;
      }
    }
  }
}
</スタイル>