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 でフィルターを使用して監視を実装する方法

ブログ    

推薦する

Node.js で MySQL データベースにバッチデータを挿入する方法

プロジェクト(nodejs)では、一度に複数のデータをデータベースに挿入する必要があります。データベ...

Vueでパスワードの表示と非表示機能を実装するアイデアを詳しく解説

効果: アイデア:入力タイプ属性を使用して、タイプ値がテキストの場合はパスワードを表示し、タイプ値が...

Ubuntu ターミナル マルチウィンドウ 分割画面 ターミネーター

1. インストールターミネーターの最大の特徴は、1つのウィンドウで複数のターミナルを開くことができる...

Webデザイン: タイトルが完全に表示できない場合

<br />今日、新しくなった ChinaUI.com の Web サイトを見たのですが...

Docker が elasticsearch を起動するときのメモリ不足の問題と解決策

質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われていま...

Vue+Openlayer で select を使用して要素を選択する実装コード

効果画像: 実装コード: <テンプレート> <div id="map&q...

25 div+css プログラミングのヒントとコツ

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

よく使われるHTMLタグのインライン要素とブロックレベル要素の詳細な説明

ブロック要素HTMLタグ分類の詳細* 住所 - 住所* blockquote - ブロック引用* c...

mysql charset=utf8 本当に意味が分かりますか

1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...

我々は自らの力でIE6を絶滅に追い込んでいる

実際、IE6 が本当にいつ消滅するのか私たちは毎日疑問に思っていますが、2001 年のリリース以来、...

Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します

純粋なフロントエンド実装:切片上傳斷點續傳。斷點續傳カットとアップロードに基づいて実装する必要があり...

CSS変数を使用してダークモードを実装するためのサンプルコード

最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...

MySQL シリーズ 7 MySQL ストレージ エンジン

1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...

CSS の高度な使い方(実戦で活用)

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...