Vue コンポーネントの実践: ページング コンポーネントの開発
はじめに
Web アプリケーションでは、ページング関数は不可欠なコンポーネントです。優れたページング コンポーネントは、プレゼンテーションがシンプルかつ明確で、機能が豊富で、統合と使用が簡単である必要があります。
この記事では、Vue.js フレームワークを使用して高度にカスタマイズ可能なページング コンポーネントを開発する方法を紹介します。 Vueコンポーネントを使った開発方法をコード例を通して詳しく解説します。
テクノロジー スタック
開発環境
ページングコンポーネント要件
設計のアイデアとコードの実装
要件に基づいて、ページング コンポーネントを実装のために複数の小さなコンポーネントに分割します。次の 3 つの小さなコンポーネントを作成する必要があります。
メインのページング コンポーネントは、ページング データとロジックの処理を担当します。ページング情報をサブコンポーネントに渡し、サブコンポーネントのイベントに応答します。
このコンポーネントはボタン コンポーネントであり、ページング ボタンの作成に使用されます。
このコンポーネントは、ページ ラベルとステータスを含む単一のページ ブロックを作成するために使用されます。ページ ブロックは、現在のページまたは非現在のページにすることができます。
次に、コードを使用して上記の 3 つのコンポーネントを実装してみましょう。
上記のコードでは、最初に ButtonPrev、ButtonNext、および Page コンポーネントをインポートしました。次に、props を使用して total、current、maxShown、prevText、nextText 属性を取得し、計算された属性ページを定義します。現在のページ番号 (current) と最大ページ番号 (maxShown) に基づいて、ページ番号を含む配列が定義されます。コンポーネントで使用するために取得されます。
また、selectPage メソッドも定義します。このメソッドでは、ページ番号 (page) が現在のページ番号 (current) と同じである場合、返すか何もしません。それ以外の場合、新しいページ番号が親コンポーネントに出力されます。
prev() メソッドと next() メソッドは、前ページと次ページのイベントを処理し、イベントが応答しないようにするために使用されます。
上記のコードでは、まず、現在のページ番号 (current) と前のページ ボタンのテキスト (prevText) 属性を取得します。小道具。テンプレートでは、クラス バインディング (無効) を使用してボタンの使用状態を制御します。 onPrev メソッドが定義されており、親コンポーネントの onPrev イベントをトリガーします。
上記のコードはButtonPrev.vueのコードをコピーし、本文と判定条件を少し変更しています。
上記のコードでは、props を通じてページ番号 (page) の値とボタンの isSelected 属性を取得します。テンプレートでは、クラス バインディング (「current」) を使用して、選択したページを強調表示します。
また、親コンポーネントの onPageSelected イベントをトリガーする onPageSelected メソッドも定義します。
最後に、これらのコンポーネントは、以下に示すように、任意の Vue.js アプリケーションのテンプレートで使用できます。
- {{ item.name }}
上記のコードでは、Pagination コンポーネントを導入し、テンプレートとして使用しました。の親コンポーネント。また、total、current、maxShown をコンポーネントにバインドして、それらの値を取得します。 onPageChanged メソッドでは、ページ変更イベントを処理し、現在のページ番号に基づいて対応するデータを要求できます。
以上がVue コンポーネントの実践: ページング コンポーネントの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
