コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Vue を使用して再利用可能なページネーション コンポーネントを構築する

不言
リリース： 2018-03-31 17:38:30
オリジナル
1048 人が閲覧しました

ページング コンポーネントは Web プロジェクトで非常に一般的なコンポーネントです。Vue を使用して再利用可能なページング コンポーネントを構築しましょう。基本的な構造と関連するイベントの監視については、この記事を参照してください。

Web アプリケーションのリソース ページングは​​、パフォーマンスに非常に役立つだけではありません。また、ユーザー エクスペリエンスの観点からも非常に便利です。この記事では、Vue を使用して動的で使用可能なページネーション コンポーネントを作成する方法を学びます。

基本構造

ページネーションコンポーネントでは、ユーザーが最初と最後のページにアクセスしたり、前後に移動したり、近くのページに直接切り替えたりできるようにする必要があります。

ほとんどのアプリケーションは、ユーザーがページを変更するたびに API リクエストを作成します。コンポーネントがこれを許可していることを確認する必要がありますが、コンポーネント内でそのようなリクエストを行うことは望ましくありません。このようにして、コンポーネントがアプリケーション全体で再利用可能であり、リクエストがオペレーション層またはサービス層で行われることを保証します。これは、ユーザーがクリックしたページの番号を使用してイベントをトリガーすることで実行できます。

API エンドポイントでページネーションを実装するには、いくつかの方法があります。この例では、API が各ページの結果の数、ページの総数、および現在のページを通知すると仮定します。これらが動的プロップになります。

対照的に、API がレコードの合計数のみを通知する場合は、結果の数をページごとの結果の数で割ることでページ数を計算できます ( totalResults / resultsPerPage )。

最初のページ、前のページ、ページ番号の範囲、次のページ、最後のページにボタンをレンダリングしたいです:

[最初] [次] [1] [2] [3] [前] [最後]

たとえば、以下のようなエフェクト:

一連のページをレンダリングしたいとはいえ、利用可能なすべてのページをレンダリングする必要はありません。コンポーネント内で最も表示されるボタンにプロップを設定できるようにしましょう。

コンポーネントに何をさせたいのか、どのようなデータが必要なのかがわかったので、HTML 構造と必要な props を設定できます。 


<template id="pagination">
  <ul class="pagination">
    <li>
      <button type="button">« First</button>
    </li>
    <li>
      <button type="button">«</button>
    </li>
    <!-- 页数的范围 -->
    <li>
      <button type="button">Next »</button>
    </li>
    <li>
      <button type="button">»</button>
    </li>
  </ul>
</template>
Vue.component(&#39;pagination&#39;, {
  template: &#39;#pagination&#39;,
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  }
})
ログイン後にコピー


上記のコードは、このコンポーネントを呼び出すと、ページネーション コンポーネントを登録します。 


<p id="app">
  <pagination></pagination>
</p>
ログイン後にコピー


この時点での効果は次のとおりです。

注意、コンポーネントの見栄えを良くし、コンポーネントに少しスタイルを追加することができます。


イベントリスニング

ここで、ユーザーがボタンをクリックしたときに、どのボタンをクリックしたかを親コンポーネントに通知する必要があります。 各ボタンにイベント リスナーを追加する必要があります。 v-on ディレクティブを使用すると、DOM イベントをリッスンできます。この例では、v-on ショートカットを使用してクリック イベントをリッスンします。

親ノードに通知するには、 $emit メソッドを使用して、ページのクリックでイベントを発行します。

また、ページが利用可能な場合、ページング ボタンには現在の状態のみが表示されるようにします。これを行うには、v-bind を使用して、disabled 属性の値を現在のページにバインドします。 :v-bind ショートカット キーを引き続き使用します。

テンプレートをクリーンに保つために、計算された属性を使用してボタンが無効になっているかどうかを確認します。 computed の使用もキャッシュされます。つまり、currentPage が変更されない限り、同じ computed プロパティに複数回アクセスすると、関数を再度実行することなく、以前に計算された結果が返されます。 

<template id="pagination">
  <ul class="pagination">
    <li>
      <button type="button" @click="onClickFirstPage" :disabled="isInFirstPage">« First</button>
    </li>
    <li>
      <button type="button" @click="onClickPreviousPage" :disabled="isInFirstPage">«</button>
    </li>
    <li v-for="page in pages">
      <button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled"> {{ page.name }}</button>
    </li>
    <li>
      <button type="button" @click="onClickNextPage" :disabled="isInLastPage">Next »</button>
    </li>
    <li>
      <button type="button" @click="onClickLastPage" :disabled="isInLastPage">»</button>
    </li>
  </ul>
</template>

Vue.component(&#39;pagination&#39;, {
  template: &#39;#pagination&#39;,
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isInFirstPage: function () {
      return this.currentPage === 1
    },
    isInLastPage: function () {
      return this.currentPage === this.totalPages
    }
  },
  methods: {
    onClickFirstPage: function () {
      this.$emit(&#39;pagechanged&#39;, 1)
    },
    onClickPreviousPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.currentPage - 1)
    },
    onClickPage: function (page) {
      this.$emit(&#39;pagechanged&#39;, page)
    },
    onClickNextPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.currentPage + 1)
    },
    onClickLastPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.totalPages)
    }
  }
})
ログイン後にコピー


ページネーションコンポーネントを呼び出すとき、totalPages と total と currentPage をコンポーネントに渡します: 


<p id="app">
  <pagination :total-pages="11" :total="120" :current-page="currentPage"></pagination>
</p>

let app = new Vue({
  el: &#39;#app&#39;,
  data () {
    return {
      currentPage: 2
    }
  }
})
ログイン後にコピー


上記のコードを実行すると、エラーが報告されます:


ページネーション コンポーネントでページが欠落していることを見つけるのは難しくありません。前に紹介したことから、ページの価値を計算する必要があることがわかります。 


Vue.component(&#39;pagination&#39;, {
  template: &#39;#pagination&#39;,
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isInFirstPage: function () {
      return this.currentPage === 1
    },
    isInLastPage: function () {
      return this.currentPage === this.totalPages
    },
    startPage: function () {
      if (this.currentPage === 1) {
        return 1
      }
      if (this.currentPage === this.totalPages) {
        return this.totalPages - this.maxVisibleButtons + 1
      }
      return this.currentPage - 1
    },
    endPage: function () {
      return Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages)
    },
    pages: function () {
      const range = []
      for (let i = this.startPage; i <= this.endPage; i+=1) {
        range.push({
          name: i,
          isDisabled: i === this.currentPage
        })
      }
      return range
    }
  },
  methods: {
    onClickFirstPage: function () {
      this.$emit(&#39;pagechanged&#39;, 1)
    },
    onClickPreviousPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.currentPage - 1)
    },
    onClickPage: function (page) {
      this.$emit(&#39;pagechanged&#39;, page)
    },
    onClickNextPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.currentPage + 1)
    },
    onClickLastPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.totalPages)
    }
  }
})
ログイン後にコピー


この時点で得られた結果は、ブラウザに次のような効果が表示されます:


これでコンポーネントが実装されました。当初意図されていたすべての機能に、単なるリストではなくページネーション コンポーネントのように見えるようにいくつかのスタイルを追加しました。

また、ユーザーが自分が閲覧しているページを明確に識別できるようにしたいと考えています。現在のページを表すボタンの色を変更してみましょう。

これを行うには、オブジェクト構文を使用して HTML クラスを現在のページ ボタンにバインドします。オブジェクト構文を使用してクラス名をバインドする場合、値が変更されると Vue は自動的にクラスを切り替えます。

虽然 v-for 中的每个块都可以访问父作用域范围，但是我们将使用 method 来检查页面是否处于 active 状态，以便保持我们的 templage 干净。


Vue.component(&#39;pagination&#39;, {
  template: &#39;#pagination&#39;,
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isInFirstPage: function () {
      return this.currentPage === 1
    },
    isInLastPage: function () {
      return this.currentPage === this.totalPages
    },
    startPage: function () {
      if (this.currentPage === 1) {
        return 1
      }
      if (this.currentPage === this.totalPages) {
        return this.totalPages - this.maxVisibleButtons + 1
      }
      return this.currentPage - 1
    },
    endPage: function () {
      return Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages)
    },
    pages: function () {
      const range = []
      for (let i = this.startPage; i <= this.endPage; i+=1) {
        range.push({
          name: i,
          isDisabled: i === this.currentPage
        })
      }
      return range
    }
  },
  methods: {
    onClickFirstPage: function () {
      this.$emit(&#39;pagechanged&#39;, 1)
    },
    onClickPreviousPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.currentPage - 1)
    },
    onClickPage: function (page) {
      this.$emit(&#39;pagechanged&#39;, page)
    },
    onClickNextPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.currentPage + 1)
    },
    onClickLastPage: function () {
      this.$emit(&#39;pagechanged&#39;, this.totalPages)
    },
    isPageActive: function (page) {
      return this.currentPage === page;
    }
  }
})
ログイン後にコピー


接下来，在 pages 中添加当前状态：


<li v-for="page in pages">
  <button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled" :class="{active: isPageActive(page.name)}"> {{ page.name }}</button>
</li>
ログイン後にコピー


这个时候你看到效果如下：


但依然还存在一点点小问题，当你在点击别的按钮时， active 状态并不会随着切换：


继续添加代码改变其中的效果：


let app = new Vue({
  el: &#39;#app&#39;,
  data () {
    return {
      currentPage: 2
    }
  },
  methods: {
    onPageChange: function (page) {
      console.log(page)
      this.currentPage = page;
    }
  }
})
ログイン後にコピー


在调用组件时：


<p id="app">
  <pagination :total-pages="11" :total="120" :current-page="currentPage" @pagechanged="onPageChange"></pagination>
</p>
ログイン後にコピー


这个时候的效果如下了：


到这里，基本上实现了咱想要的分页组件效果。

无障碍化处理

熟悉Bootstrap的同学都应该知道，Bootstrap中的组件都做了无障碍化的处理，就是在组件中添加了WAI-ARIA相关的设计。比如在分页按钮上添加 aria-label 相关属性：


在我们这个组件中，也相应的添加有关于WAI-ARIA相关的处理：


<template id="pagination">
  <ul class="pagination" aria-label="Page navigation">
    <li>
      <button type="button" @click="onClickFirstPage" :disabled="isInFirstPage" aria-label="Go to the first page">« First</button>
    </li>
    <li>
      <button type="button" @click="onClickPreviousPage" :disabled="isInFirstPage" aria-label="Previous">«</button>
    </li>
    <li v-for="page in pages">
      <button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled" :aria-label="`Go to page number ${page.name}`"> {{ page.name }}</button>
    </li>
    <li>
      <button type="button" @click="onClickNextPage" :disabled="isInLastPage" aria-label="Next">Next »</button>
    </li>
    <li>
      <button type="button" @click="onClickLastPage" :disabled="isInLastPage" aria-label="Go to the last page">»</button>
    </li>
  </ul>
</template>
ログイン後にコピー


这样有关于 aria 相关的属性就加上了：

 

最终的效果如下，可以点击下面的连接访问：


https://codepen.io/airen/pen/mxMLrG

相关推荐：

vue构建一个自动建站项目

vue构建多页面应用实例代码分享


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

関連ラベル：
javascript ページネーション コンポーネント
ソース：php.cn
前の記事：Ajaxを使用してスマート検索ボックスプロンプト機能を作成する方法 次の記事：5 つの一般的な JavaScript 関数のまとめ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート