使用Vue構(gòu)建可重用的分頁組件

2019-11-19 14:06:30

字體：大中小

供稿：網(wǎng)友

Web應(yīng)用程序中資源分頁不僅對性能很有幫助，而且從用戶體驗的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動態(tài)和可用的分頁組件。

基本結(jié)構(gòu)

分頁組件應(yīng)該允許用戶訪問第一個和最后一個頁面，向前和向后移動，并直接切換到近距離的頁面。

大多數(shù)應(yīng)用程序在用戶每次更改頁面時都會發(fā)出API請求。我們需要確保組件允許這樣做，但是我們不希望在組件內(nèi)發(fā)出這樣的請求。這樣，我們將確保組件在整個應(yīng)用程序中是可重用的，并且請求都是在操作或服務(wù)層中進(jìn)行的。我們可以通過使用用戶單擊的頁面的數(shù)字觸發(fā)事件來實現(xiàn)此目的。

有幾種可能的方法來實現(xiàn)API端點上的分頁。對于這個例子，我們假設(shè)API告訴我們每個頁面的結(jié)果數(shù)、頁面總數(shù)和當(dāng)前頁面。這些將是我們的動態(tài) props 。

相反，如果API只告訴記錄的總數(shù)，那么我們可以通過將結(jié)果的數(shù)量除以每一頁的結(jié)果數(shù)來計算頁數(shù)： totalResults / resultsPerPage 。

我們想要渲染一個按鈕到第一頁、上一頁、頁面數(shù)量范圍、下一頁和最后一頁：

[first] [next] [1] [2] [3] [previous] [last]

比如像下圖這樣的一個效果：

盡管我們希望渲染一個系列的頁面，但并不希望渲染所有可用頁面。讓我們允許在我們的組件中設(shè)置一個最多可見按鈕的 props 。

既然我們知道了我們想要的組件要做成什么，需要哪些數(shù)據(jù)，我們就可以設(shè)置HTML結(jié)構(gòu)和所需要的 props 。

<template id="pagination">  <ul class="pagination">    <li>      <button type="button">« First</button>    </li>    <li>      <button type="button">«</button>    </li>    <!-- 頁數(shù)的范圍 -->    <li>      <button type="button">Next »</button>    </li>    <li>      <button type="button">»</button>    </li>  </ul></template>Vue.component('pagination', {  template: '#pagination',  props: {    maxVisibleButtons: {      type: Number,      required: false,      default: 3    },    totalPages: {      type: Number,      required: true    },    total: {      type: Number,      required: true    },    currentPage: {      type: Number,      required: true    }  }})

上面的代碼注冊了一個 pagination 組件，如果調(diào)用這個組件：

<div id="app">  <pagination></pagination></div>

這個時候看到的效果如下：

注意，為了能讓組件看上去好看一點，給組件添加了一點樣式。

事件監(jiān)聽

現(xiàn)在我們需要通知父組件，當(dāng)用戶單擊按鈕時，用戶點擊了哪個按鈕。

我們需要為每個按鈕添加一個事件監(jiān)聽器。 v-on 指令允許偵聽DOM事件。在本例中，我將使用 v-on 的快捷鍵來偵聽單擊事件。

為了通知父節(jié)點，我們將使用 $emit 方法來發(fā)出一個帶有頁面點擊的事件。

我們還要確保分頁按鈕只有在頁面可用時才唯一一個當(dāng)前狀態(tài)。為了這樣做，將使用 v-bind 將 disabled 屬性的值與當(dāng)前頁面綁定。我們還是使用 :v-bind 的快捷鍵 : 。

為了保持我們的 template 干凈，將使用 computed 屬性來檢查按鈕是否被禁用。使用 computed 也會被緩存，這意味著只要 currentPage 不會更改，對相同計算屬性的幾個訪問將返回先前計算的結(jié)果，而不必再次運行該函數(shù)。

<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('pagination', {  template: '#pagination',  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('pagechanged', 1)    },    onClickPreviousPage: function () {      this.$emit('pagechanged', this.currentPage - 1)    },    onClickPage: function (page) {      this.$emit('pagechanged', page)    },    onClickNextPage: function () {      this.$emit('pagechanged', this.currentPage + 1)    },    onClickLastPage: function () {      this.$emit('pagechanged', this.totalPages)    }  }})

在調(diào)用 pagination 組件時，將 totalPages 和 total 以及 currentPage 傳到組件中：

<div id="app">  <pagination :total-pages="11" :total="120" :current-page="currentPage"></pagination></div>let app = new Vue({  el: '#app',  data () {    return {      currentPage: 2    }  }})

運行上面的代碼，將會報錯：

不難發(fā)現(xiàn)，在 pagination 組件中，咱們還少了 pages 。從前面介紹的內(nèi)容，我們不難發(fā)現(xiàn)，需要計算出 pages 的值。

Vue.component('pagination', {  template: '#pagination',  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('pagechanged', 1)    },    onClickPreviousPage: function () {      this.$emit('pagechanged', this.currentPage - 1)    },    onClickPage: function (page) {      this.$emit('pagechanged', page)    },    onClickNextPage: function () {      this.$emit('pagechanged', this.currentPage + 1)    },    onClickLastPage: function () {      this.$emit('pagechanged', this.totalPages)    }  }})

這個時候得到的結(jié)果不再報錯，你在瀏覽器中將看到下圖這樣的效果：

添加樣式

現(xiàn)在我們的組件實現(xiàn)了最初想要的所有功能，而且添加了一些樣式，讓它看起來更像一個分頁組件，而不僅像是一個列表。

我們還希望用戶能夠清楚地識別他們所在的頁面。讓我們改變表示當(dāng)前頁面的按鈕的顏色。

為此，我們可以使用對象語法將HTML類綁定到當(dāng)前頁面按鈕上。當(dāng)使用對象語法綁定類名時，Vue將在值發(fā)生變化時自動切換類。

雖然 v-for 中的每個塊都可以訪問父作用域范圍，但是我們將使用 method 來檢查頁面是否處于 active 狀態(tài)，以便保持我們的 templage 干凈。

Vue.component('pagination', {  template: '#pagination',  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('pagechanged', 1)    },    onClickPreviousPage: function () {      this.$emit('pagechanged', this.currentPage - 1)    },    onClickPage: function (page) {      this.$emit('pagechanged', page)    },    onClickNextPage: function () {      this.$emit('pagechanged', this.currentPage + 1)    },    onClickLastPage: function () {      this.$emit('pagechanged', this.totalPages)    },    isPageActive: function (page) {      return this.currentPage === page;    }  }})

接下來，在 pages 中添加當(dāng)前狀態(tài)：

<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>

這個時候你看到效果如下：

但依然還存在一點點小問題，當(dāng)你在點擊別的按鈕時， active 狀態(tài)并不會隨著切換：

繼續(xù)添加代碼改變其中的效果：

let app = new Vue({  el: '#app',  data () {    return {      currentPage: 2    }  },  methods: {    onPageChange: function (page) {      console.log(page)      this.currentPage = page;    }  }})

在調(diào)用組件時：

<div id="app">  <pagination :total-pages="11" :total="120" :current-page="currentPage" @pagechanged="onPageChange"></pagination></div>

這個時候的效果如下了：

到這里，基本上實現(xiàn)了咱想要的分頁組件效果。

無障礙化處理

熟悉Bootstrap的同學(xué)都應(yīng)該知道，Bootstrap中的組件都做了無障礙化的處理，就是在組件中添加了WAI-ARIA相關(guān)的設(shè)計。比如在分頁按鈕上添加 aria-label 相關(guān)屬性：

在我們這個組件中，也相應(yīng)的添加有關(guān)于WAI-ARIA相關(guān)的處理：

<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>

這樣有關(guān)于 aria 相關(guān)的屬性就加上了：