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

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

序文

ショッピングサイトを閲覧しているとき、商品の上にマウスを置くと拡大表示されるのを誰もが見たことがあると思います。今日は、虫眼鏡効果を持つグローバルコンポーネントを自分でカプセル化してみます。見てみましょう〜

1. カプセル化の重要性

  • 技術的な観点から
    • vueプラグイン方式でグローバルコンポーネントとしてカプセル化されており、プロジェクト全体の他の場所でも使用でき、使いやすい
    • モジュール開発コンセプト、1つのモジュールで1つの機能を実現
  • ユーザーの視点
    • より良いブラウジング体験をもたらす
    • 商品の詳細を見ることができます

2. どのようにカプセル化しますか?

1. 準備

@vueuse/coreのuseMouseInElementメソッドを使用する必要があるので、まずプロジェクトのルートディレクトリでターミナルを開き、次のコマンドを実行します。

ここに指定されたバージョンがインストールされています。必要に応じて選択してください

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

2. 梱包を開始する

前回の記事と同様に、vueプラグインを使用してグローバルコンポーネントを登録します

カプセル化されたグローバル コンポーネントを src/components に保存し、このディレクトリに新しい expand-images.vue ファイルを作成します。

コードは次のとおりです(例):

<テンプレート>
  <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;
      }
    }
  }
}
</スタイル>

src/componentsの下に新しいindex.jsを作成します。

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

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

main.jsにプラグインとして登録する

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

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

3. 使用

ここではテストに固定データを使用します

コードは次のとおりです(例):

<テンプレート>
  <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 自動;
}
</スタイル>

3. 効果の実証

マウスを右側の小さな画像に移動すると、現在表示されている画像が切り替わります

左側の画像プレビュー領域にマウスを置き、プレビュー領域内でマウスを動かすと、右側に拡大された指定領域が表示されます。

(追記:gif画像が大きすぎるので、効果画像を見てくださいね~)

要約する

グローバルコンポーネントとして一括登録する方法については、Vue 共通ツール関数の記事を参照してください。

これで、vue3 を使用して虫眼鏡効果を実現する方法についての記事は終了です。vue3 を使用して虫眼鏡効果を実現する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3 カプセル化された虫眼鏡コンポーネントのサンプルコード
  • Vue3は画像拡大鏡効果を実現します
  • Vueは商品詳細ページの虫眼鏡機能を実装します
  • Vueはタブ切り替えの虫眼鏡効果を実装します
  • Vueはシンプルな虫眼鏡効果を実装します
  • Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明
  • Vueは虫眼鏡付きの検索ボックスを実装します
  • Vue3.0 は虫眼鏡効果のケーススタディを実装します
  • Vue3.0 手書き拡大鏡効果
  • Vue が虫眼鏡効果を実装
  • Vueベースの製品メイン画像拡大鏡ソリューションの詳細な説明
  • 手書きのVue拡大鏡効果
  • vue2.x ベースの電子商取引画像拡大プラグインの使用
  • Vueは製品の拡大鏡効果を実現します

<<:  MySQL テーブル構造を Excel にエクスポートする方法

>>:  Zabbix でフィルターを使用して監視を実装する方法

推薦する

CSSで制御可能な点線を実装する方法

序文CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実...

継続的インテグレーションテストにおけるDocker Swarmの適用の詳細な説明

背景アジャイル モデルは広く使用されており、テストは特に重要です。新しいバージョンは頻繁にリリースす...

Element UI をインストールして vue3.0 でベクター グラフィックスを使用する方法

ここでは、v3 のインストールと使用にのみ焦点を当てます。v2 について学びたい場合は、公式 Web...

nginx を使用した負荷分散モジュールの解釈

目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...

Linux ディスク クォータ管理のグラフィカルな例

ディスク クォータは、コンピューター内の指定されたディスクのストレージ制限です。つまり、管理者はユー...

マインスイーパゲームを実装するための jQuery プラグイン (3)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...

JavaScript デザインパターン コマンドパターン

コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...

Vueで配列の変更を監視する方法

目次序文ソースコード学習の第一歩はどこから始めればよいでしょうか?写真から始めましょうソースコードを...

Docker構成 Alibaba Cloud Container Serviceの操作

Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...

Vueのインストール方法の紹介

目次1. グローバルに登録されたコンポーネント2. グローバルカスタム指示vue 、新しいプラグイン...

docker inspect コマンドの使用に関するヒント

説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...

MySQL innodb_autoinc_lock_mode について

innodb_autoinc_lock_mode パラメータは、auto_increment 列を持...

Macでのファイル権限の表示と設定の詳細な説明

序文Mac システムのターミナルでファイルの権限を変更するには、Linux の chmod コマンド...

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおり...