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 レプリケーションの詳細な説明と簡単な例

推薦する

Angular環境構築と簡単な体験のまとめ

Angular入門Angular は、Google が開発したオープンソースの Web フロントエン...

Linuxのwatchコマンドの使用

1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する複数の方法

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する 7 つの方法。コー...

ウェブ画像形式としてPNG、JPG、GIFを選択して使用する方法

では、GIF、PNG、JPG のどの形式を候補形式として選択すればよいのでしょうか。また、どの画像形...

タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)

前回、Taobaoの詳細ページを分析した後(クリックして表示)、ショッピングモールの基本テンプレート...

Mysql トランザクション分離レベルの読み取りコミットの詳細な説明

MySQL トランザクション分離レベルを表示する mysql> '%isolation...

ES6 配列のコピーおよびフィルメソッド copyWithin() および fill() の具体的な使用法

目次バッチコピー copyWithin()配列を埋めるメソッド fill()指数の計算方法については...

auto.jsを使用して毎日の自動チェックイン機能を実現する

auto.js を使用して毎日のチェックインを自動化する感染症のせいで、毎日時間通りに家に帰らなけれ...

Reactフックの長所と短所

目次序文アドバンテージ:欠点: 1. レスポンシブな使用効果2. ステータスが同期されていないRea...

MySQL マスタースレーブレプリケーションスレッドの状態遷移に関する詳細な理解

序文MySQL マスター スレーブ レプリケーションの基本原理は、スレーブ データベースがマスター ...

Vue でログインと登録テンプレートを実装するためのサンプルコード

テンプレート 1: ログイン.vue <テンプレート> <p class=&quo...

CentOS7 ファイアウォール操作コマンドの完全なリスト

目次インストール: 1. ファイアウォールの基本的な使い方2. ファイアウォールd-cmdを設定する...

el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装

効果環境が必要ビュー要素UIドラッグアンドドロッププラグインSortable.js必要な構成プロパテ...

ネイティブ js はフォームの定期的な検証を実装します (検証後にのみ送信)

以下の機能が実装されています。 1. ユーザー名: onfouc は msg ルールを表示します。o...

Docker に Kong ゲートウェイをインストールする方法の例

1. Dockerネットワークを作成する docker ネットワーク作成 kong-net 2. デ...