Vue3.0 は虫眼鏡効果のケーススタディを実装します

<テンプレート>
  <div ref="ターゲット">
    <h1>こんにちは世界</h1>
  </div>
</テンプレート>
 
<スクリプト>
'vue' から { ref } をインポートします
'@vueuse/core' から { useMouseInElement } をインポートします。
 
エクスポートデフォルト{
  設定（） {
    定数ターゲット = ref(null)
 
    const { x, y, isOutside } = useMouseInElement(ターゲット)
 
    {x, y, isOutside} を返す
  }
}
</スクリプト>

 <div class="layer" :style="layerStyle"></div> //これはマスクレイヤーです setup(){ //これはマウスを実装するためのコードです const layerStyle = reactive({
      上: '0px'、
      左: '0px'
    })
    // 3つの値の変化を監視し、最初のパラメータを配列watch([elementX, elementY, isOutside], () => {で監視します
      // レイヤースタイル.left = 要素X.value / 2 + 'px'
      // レイヤースタイル.top = 要素Y.値 / 2 + 'px'
      上 = 要素Y.値 - 100 とします
      左 = 要素X.値 - 100
 
      // マスク要素に位置を割り当てる if (top < 0) top = 0
      (トップ > 200) トップ = 200
      （左 < 0）の場合、左 = 0
      （左 > 200）の場合、左 = 200
      レイヤースタイル.top = 上 + 'px'
      レイヤースタイル.left = 左 + 'px'
    })
    戻り値: { elementX, elementY, isOutside, target, layerStyle }
 
}

 <div class="large" :style="{ backgroundImage:`url(${images[current]})`,...largeStyle }"></div> 

 。大きい {
   位置: 絶対;
    上: 0;
    左: 412px;
    幅: 400ピクセル;
    高さ: 400px;
    ボックスの影: 0 0 10px rgba(0,0,0,0.1);
    背景繰り返し: 繰り返しなし;
    背景サイズ: 800px 800px;
    背景色: #f8f8f8;
 }