Vueのページネーションコンポーネントの例

再利用可能なVUEページングコンポーネントを実装するには、次のキーポイントを明確にする必要があります。1。総数、1ページあたりの行数、現在のページ番号を含む小道具を定義します。 2。ページの総数を計算します。 3.表示されているページ番号アレイを動的に生成します。 4.ページ番号を処理して、イベントをクリックし、親コンポーネントに渡します。 5.スタイルとインタラクションの詳細を追加します。プロップを介してデータを受信し、デフォルト値を設定し、計算された属性を使用してページの総数を計算し、メソッドを使用して現在表示されているページ番号アレイを生成し、テンプレートでボタンをレンダリングし、クリックイベントをクリックして[現在ページイベントをトリガーし、親コンポーネントのイベントを聞いて、現在のページ番号を更新して、CSSのステータスを改善します。

VUEを使用して、バックエンド管理システムやコンテンツディスプレイプラットフォームなどのページング機能を必要とするプロジェクトを開発する場合は、再利用可能なページングコンポーネントを実装する必要があります。ここでは、いくつかの重要なポイントについて簡単に説明し、VUEページネーションコンポーネントの基本的で実用的な例を示します。

基本構造とデータの準備

コンポーネントを作成する前に、必要なデータを明確にします。

• 現在のページ番号（CurrentPage）
• totherItems
• ページごとに表示されるピースの数（ページサイズ）
• オプション：表示するページ番号の最大数（表示する最大5ページ番号など）

これらを小道具として、または親コンポーネントから渡すことができます。例えば：

小道具：{
  合計：{タイプ：番号、必須：true}、
  Pagesize：{type：number、default：10}、
  currentPage：{type：number、default：1}
}

次に、これらに基づいてページの総数を計算します。

計算：{
  TotalPages（）{
    return math.ceil（this.total / this.pagesize）
  }
}

ページ番号をレンダリングボタン

一般的な慣行は、ボタンが多すぎることを避けるために、現在のページの左右に1つまたは2ページの番号のみを表示することです。たとえば、現在5ページにある場合、最大5つのボタンが表示され、3、4、5、6、および7を表示する必要があります。

1つの方法で表示するページ番号の配列を生成できます。

方法：{
  getPageNumbers（）{
    const maxbuttons = 5
    const pages = []
    const half = math.floor（maxbuttons / 2）

    ret start = math.max（1、this.currentpage -half）
    let end = math.min（this.totalpages、maxbuttons -1を開始）

    //端近くの場合、（終了-Start <MaxButtons -1）{{end -start <maxbuttons -1）if（end -start）を前方に調整します。
      start = math.max（1、end -maxbuttons 1）
    }

    for（let i = start; i <= end; i）{
      pages.push（i）
    }

    ページを返します
  }
}

これにより、テンプレートで動的なページ番号ボタンをレンダリングできます。

ページ番号のクリックとイベント配信を処理します

ユーザーがページ番号をクリックすると、 $emitを介して新しいページ番号値を親コンポーネントに渡し、データの更新を処理させる必要があります。

 <div class = "pagination">
  <button @click = "$ emit（ &#39;update：current-page&#39;、1）"：disabled = "currentPage === 1"> home </button>
  <button v-for = "pagenumbersのページ" 
          ：key = "page"
          @click = "$ emit（ &#39;update：current-page&#39;、page）"
          ：class = "{active：currentPage ===ページ}">
    {{page}}
  </button>
  <button @click = "$ emit（ &#39;update：current-page&#39;、totalpages）"：disabled = "currentPage === totalPages">最後のページ</button>
</div>

親コンポーネントでこのページングコンポーネントを使用する場合、次のようにバインドできます。

 <ページネーション 
  ：total = "100" 
  ：current-page = "currentPage" 
  @update：current-page = "currentPage = $ event"
/>

スタイルとインタラクションの詳細

• 現在の.activeにハイライトスタイルを追加することは非常に一般的です。
• 「前のページ」または「次のページ」ボタンを追加して、無効な操作を避けることもできます。
• ページ番号が多すぎる場合は、楕円（…）を追加して、中央に非表示のページ番号があることを示すこともできますが、これはもう少し複雑になります。
• 誤って触れるのを防ぐために、ボタンの数を簡素化することをお勧めします。

基本的にそれだけです。単純なページングコンポーネントは複雑すぎる必要はありませんが、明確な論理と合理的な相互作用を持つことは非常に実用的です。

以上がVueのページネーションコンポーネントの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。