vue3.0 でカルーセル コンポーネントをカプセル化する手順

vue3.0 でカルーセル コンポーネントをカプセル化する手順

前回に引き続き、vue3.0 の基本的な使い方を理解し、しばらく使用した後、vue3.0 に適した PC コンポーネントライブラリを開発する準備を始めます。いくつかのコンポーネントライブラリの記述方法や注意事項については、今後も更新していきます。興味のある学生は注目してください。それでは、さっそく始めましょう。

vue3.0 + TS で使用される、PC に適したカルーセル コンポーネントを開発します (アプリはまだ考慮されていません)

一般的な効果は次のとおりです。

フリー画像カルーセル、対応するドット画像ジャンプ、左右インジケータジャンプなど。次のオプション構成を公開します。

上記が主なオプションです。これらをカプセル化する方法について詳しく説明しましょう。

1: カプセル化のアイデア

vue3.0 と vue2.0 でコンポーネントをカプセル化するという基本的な考え方は、実は同じです。コンポーネントを登録するには vue.component(); を使用し、それを main.ts にマウントして使用する必要があります。

src の下に作成します: src --> libs --> sqm_ui (独自の UI ライブラリの名前) --> index.js

ここでの index.js は、コンポーネントを登録するためのエントリ ポイントです。

同じディレクトリに、カルーセル コンポーネントのすべての機能とスタイルが含まれる新しいファイル Carousel を作成します。

ディレクトリは次のとおりです。

注意すべき点が 1 つあります。vue3.0 と ts で使用されていますが、エントリ ファイルでは引き続き js が使用されています。これは、非 ts の記述方法にも適応するためです。

index.js の場合:

'./Carousel/carousel' から Carousel をインポートします。
CarItem を './Carousel/item' からインポートします。SqmUI = {} とします。
SqmUI.install = 関数(vue) {
 vue.component(カルーセル.name, カルーセル);
 vue.component(CarItem.name,CarItem);
};
デフォルトのSqmUIをエクスポートします。

ただし、TS で使用するには、TS が使用するライブラリのメンバー型を記述する新しい index.d.ts ファイルを作成する必要があります。

const _default を宣言します: ({
 install: (app: import("vue").App<any>, ...options: any[]) => any; // 以下は install の簡単な説明です});
デフォルト _default をエクスポートします。

上記の設定が完了したら、main.ts で使用します。

'@/libs/sqm_ui/index' から SqmUI をインポートします。
'vue' から {createApp} をインポートします。
SqmUI を作成します。

2. 包装工程

カルーセルには、スクロールする画像を配置するための固定コンテナが必要です。このとき、Carousel.vue コンポーネントを定義する必要があります。

<テンプレート>
 <div class="carousel">
 <slot></slot> // ここのスロットはアイテムコンポーネントを配置するために使用されます</div>
</テンプレート>

写真を保存するためのコンポーネントitem.vueも必要です

<テンプレート>
 <div class="carousel-item">
 <slot></slot> // ここのスロットは画像を配置するために使用されます
 </div>
</テンプレート>

基本的なフレームワークが設定されており、ユーザーはそれを使用するときに、カルーセル内のオプションを構成します。

<カルーセル
 :autoPlay="true" 
 :durdation="3000" 
 :initial="3" 
 :hasDot="true" 
 :hasDirector="true"> </カルーセル>

carousel.vueで渡された設定項目を受け入れる

小道具: { 
 自動再生:  
 タイプ: ブール値、  
 デフォルト: true }, 
 間隔: {  
 タイプ: 数値、  
 デフォルト: 3000 }, 
 イニシャル: {  
 タイプ: 数値、  
 デフォルト: 0 }, 
 ドット: {  
 タイプ: ブール値、
 デフォルト: true }, 
 ディレクター: { 
 タイプ: ブール値、  
 デフォルト: true }
}

(1):自動再生を実装する:

carousel.vue の場合:

定数autoPlay = () => {
 (props.autoplay)の場合{
 t = setInterval(() => {
  // カルーセルロジック}, props.duration);
};
マウント時(() => {
 自動再生();
});

ロジックは非常にシンプルです。autoPlay 関数を定義し、マウント フェーズでマウントします。

(2):カルーセルを実装する:

次の質問について考えてください: この画像を表示するにはどうすればよいでしょうか?現在の画像を表示するには、そのインデックスがカルーセル中のインデックスと等しくなければなりません。

item.vue の場合:

<div class="carsel-item" v-if="selfIndex === currentIndex"> 
 <スロット></スロット> 
</div>

自身のインデックスが現在のインデックスと等しい場合にのみ表示されます。

currentIndex を取得:

vue3.0 の組み込みメソッド: getCurrentInstance()

これは非常に重要なメソッドです。このメソッドを通じて、現在のコンポーネントのインスタンスを取得し、ctx を通じてコン​​ポーネントのコンテキストを取得できます。とても使いやすいです。

item.vue の場合:

設定() {
 const インスタンス:any = getCurrentInstance(); console.log(インスタンス);
}

instance.vnode の下には、各イメージのキー、つまりインデックスとなるキーがあります。

instance.parent.ctx の下には現在のインデックスである currentIndex が定義されています。

両者が同じであれば、現在の画像を表示できます。では、currentIndex はどこに設定されているのでしょうか?

carousel.vue に戻る:

セットアップ(プロパティ) { 
 定数状態 = リアクティブ({  
 現在のインデックス: props.initial、  
 アイテム長さ: 0,  
 表示ディレクトリ: false 
 });
}

現在の currentIndex は渡された initial の値です。

自動再生の場合: カルーセルを実行する

const setIndex = ((dir:String): void => { 
 スイッチ(dir) { 
 ケース 'next':  
  状態.現在のインデックス += 1;  
  (state.currentIndex === state.itemLen) の場合 {   
  状態.currentIndex = 0;  
  }  
  壊す; 
 '前'の場合:  
  状態.現在のインデックス -= 1;  
  (state.currentIndex === -1)の場合{   
  state.currentIndex = state.itemLen - 1;  
  }  
  壊す; 
 デフォルト:  
  壊す; 
 } 
});

次に、カルーセル イメージの長さと等しくなるまで currentIndex++; を実行します。 (配列.長さ)

prev の場合、currentIndex--; を === -1 になるまで実行します。

次に、item.vue で listen します。

ウォッチ(() => {  
 インスタンス.parent.ctx.currentIndex を返す 
 }, (値) => {  
 state.currentIndex = 値; 
})

これで画像カルーセルが完成します。

3: ドットインジケーター

実装のアイデアはまだ非常にシンプルです。

渡された hasDot は、表示する必要があるかどうかを判断するために使用されます。渡された itemlen は、画像の数に基づいて表示するドットの数を決定します。ドットをクリックすると、対応する画像にジャンプします。

dot.vueの場合:

<テンプレート>
 <div class="dot-goes-wrapper" v-if="hasDot">
 <div class="dot-item" v-for="item in itemLen" :key="item">
 <a href="javascript:;" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" 
  クラス="ドットリンク"
  :style="{backgroundColor: (item - 1) === currentIndex ? dotBgColor : '#fff'}" 
  @click="dotClick(アイテム - 1)">
 </a> 
 </div> 
 </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent} をインポートします。
エクスポートデフォルトdefineComponent({
 名前: 'ドット',
 小道具: { 
 項目長さ: 数値、 
 currentIndex: 数値、 
 ドット背景色: {  
  タイプ: 文字列、
  デフォルト: '#ff5000' },
 ドット: {  
  タイプ: ブール値、  
  デフォルト: true } 
 }, 
 セットアップ(props, ctx) { 
 const dotClick = (インデックス: 数値) => { 
  ctx.emit('dotClick', インデックス); 
 }; 
 戻る {  
  ドットクリック 
 } 
}})
</スクリプト>

ctx を通じて dotClick イベントをトリガーし、インデックスを渡して、親コンポーネント (Carousel.vue) で使用します。

@dotClick="ドットクリック"

const dotClick = (インデックス: 任意): void => {

state.currentIndex = インデックス;

};

これでドットインジケーターが完成します。

4: 左と右のインジケーター

これは非常に簡単で、移動時に表示し、画像をクリックしてスライドするだけです。

<テンプレート> 
 <div v-if="showDir"> 
 <div class="director dir-next" v-if="dir === 'next'">  
  <a href="javascript:;" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" @click="dirClick(dir)">&gt;</a> 
 </div> 
 <div class="director dir-prev" v-else-if="dir === 'prev'">  
  <a href="javascript:;" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" @click="dirClick(dir)">&lt;</a> 
 </div> 
 </div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent} をインポートします。
エクスポートデフォルトdefineComponent({ 
 名前: 'direct'、 
 小道具: { 
 dir: 文字列、 
 表示ディレクトリ: {  
  タイプ: ブール値、  
  デフォルト: false 
 } 
 }, 
 セットアップ(props, ctx) { 
 const dirClick = (dir: 文字列) => {  
  ctx.emit('dirClick', dir); 
 }; 
 戻る {  
  クリック 
 } 
 }
})</script>

同様に、dirClick イベントが親コンポーネントに渡され、親コンポーネントで click-move が実行されます。

5: 最後に:

カルーセルはタイマーによって実装されているため、タイマーを破棄する必要があります。

マウント解除前に(() => {

      _clearFunction();

});

関数_clearFunction(): void {

     クリア間隔(t);

       t = ヌル;

};

マウスイン時に自動再生を停止し、左と右のインジケーターを表示します。

const マウスエンター = (): void => { 
 _clearFunction();
 状態.showDir = true;
 }; 

マウスを動かして左右のインジケーターが消えたら再生を開始します

 定数mouseLeave = (): void => { 
  自動再生();
  状態.showDir = false; 
};

わかりました。これが大まかな考え方です。さらに検討できる詳細がいくつかあります。ありがたい! !

VI: 過去の問題のレビュー

www.jb51.net/article/206833.htm

上記は、vue3.0 でカルーセル コンポーネントをカプセル化する手順の詳細内容です。vue3.0 でカルーセル コンポーネントをカプセル化する方法については、123WORDPRESS.COM の他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • Vue で better-scroll を使用してカルーセル コンポーネントを実装する
  • vue.jsカルーセルコンポーネントの使い方の詳しい説明
  • Vue2 スライド コンポーネントのサンプル コード
  • Vueのカルーセルコンポーネント実装方法
  • Vue2の再利用可能なカルーセルコンポーネントの詳細な説明
  • vue.js カルーセル コンポーネント vue-awesome-swiper に基づくカルーセル チャートの実装
  • Vue3でカルーセルコンポーネントをカプセル化する方法

<<:  Ubuntu の Python で C/C++ メソッドを呼び出すダイナミック リンク ライブラリの詳細な説明

>>:  MySQL レプリケーションの詳細な説明と簡単な例

推薦する

Intellij IDEA による Docker イメージの展開方法の手順の迅速な実装

目次1. Dockerはリモートアクセスを可能にする2. Intellij IDEAにDockerプ...

フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 1

デザイナーは独自のフォント ライブラリを持っているため、プロジェクトの設計時にすぐに使用できます。今...

CSS3 画像の境界線を学ぶのに役立つ記事

CSS3 border-image プロパティを使用すると、要素の周囲に画像の境界線を設定できます。...

JS WebSocketを使用して簡単なチャットを実装する方法

目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...

Windows 64 ビットでの MySQL 8.0.13 のインストールと設定方法のグラフィック チュートリアル

この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...

WeChatアプレットはシンプルな手書き署名コンポーネントを実装します

目次背景:必要:効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...

Centos7 で keepalived ログを別のパスに設定する方法の詳細な説明

Keepalived のインストール: cd <keepalived_sourcecode_p...

jsvc を使用して tomcat を起動する方法 (通常のユーザーとして実行)

jsvc の紹介実稼働環境では、Tomcat はデーモン モードで実行する必要があります。Tomc...

Mongodb の GUID 表示の問題の詳細な分析

問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...

MySQLデータベースの操作とメンテナンスのデータ復旧方法

これまでの 3 つの記事では、論理バックアップと物理バックアップを含む、MySQL データベースの一...

セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...

ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

目次背景1. 思考分析2. ページ構成2.1 HTML レイヤー2.2 CSS レイヤー2.3 JS...

JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要

まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...

HTML はモバイル上で固定フローティング半透明検索ボックスを実装します

質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...

Vueページの初回読み込み最適化の全プロセス

目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...