序文ショッピングサイトを閲覧しているとき、商品の上にマウスを置くと拡大表示されるのを誰もが見たことがあると思います。今日は、虫眼鏡効果を持つグローバルコンポーネントを自分でカプセル化してみます。見てみましょう〜 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL テーブル構造を Excel にエクスポートする方法
>>: Zabbix でフィルターを使用して監視を実装する方法
プロジェクト(nodejs)では、一度に複数のデータをデータベースに挿入する必要があります。データベ...
効果: アイデア:入力タイプ属性を使用して、タイプ値がテキストの場合はパスワードを表示し、タイプ値が...
1. インストールターミネーターの最大の特徴は、1つのウィンドウで複数のターミナルを開くことができる...
<br />今日、新しくなった ChinaUI.com の Web サイトを見たのですが...
質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...
<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われていま...
効果画像: 実装コード: <テンプレート> <div id="map&q...
1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...
ブロック要素HTMLタグ分類の詳細* 住所 - 住所* blockquote - ブロック引用* c...
1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...
実際、IE6 が本当にいつ消滅するのか私たちは毎日疑問に思っていますが、2001 年のリリース以来、...
純粋なフロントエンド実装:切片上傳斷點續傳。斷點續傳カットとアップロードに基づいて実装する必要があり...
最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...
1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...
1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...