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

更新時(shí)間：2018年03月26日 08:35:16 作者：Airen

分頁(yè)組件在web項(xiàng)目中是十分常見(jiàn)的組件，讓我們使用Vue構(gòu)建可重用的分頁(yè)組件，關(guān)于基本結(jié)構(gòu)和相關(guān)事件監(jiān)聽(tīng)大家參考下本文

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

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

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

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

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

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

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

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

比如像下圖這樣的一個(gè)效果：

盡管我們希望渲染一個(gè)系列的頁(yè)面，但并不希望渲染所有可用頁(yè)面。讓我們?cè)试S在我們的組件中設(shè)置一個(gè)最多可見(jiàn)按鈕的 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>
    <!-- 頁(yè)數(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
    }
  }
})

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

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

這個(gè)時(shí)候看到的效果如下：

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

事件監(jiān)聽(tīng)

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

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

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

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

為了保持我們的 template 干凈，將使用 computed 屬性來(lái)檢查按鈕是否被禁用。使用 computed 也會(huì)被緩存，這意味著只要 currentPage 不會(huì)更改，對(duì)相同計(jì)算屬性的幾個(gè)訪問(wèn)將返回先前計(jì)算的結(jié)果，而不必再次運(yùn)行該函數(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 組件時(shí)，將 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
    }
  }
})

運(yùn)行上面的代碼，將會(huì)報(bào)錯(cuò)：

不難發(fā)現(xiàn)，在 pagination 組件中，咱們還少了 pages 。從前面介紹的內(nèi)容，我們不難發(fā)現(xiàn)，需要計(jì)算出 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)
    }
  }
})

這個(gè)時(shí)候得到的結(jié)果不再報(bào)錯(cuò)，你在瀏覽器中將看到下圖這樣的效果：

添加樣式

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

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

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

雖然 v-for 中的每個(gè)塊都可以訪問(wèn)父作用域范圍，但是我們將使用 method 來(lái)檢查頁(yè)面是否處于 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;
    }
  }
})

接下來(lái)，在 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>

這個(gè)時(shí)候你看到效果如下：

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

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

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

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

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

這個(gè)時(shí)候的效果如下了：

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

無(wú)障礙化處理

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

在我們這個(gè)組件中，也相應(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)的屬性就加上了：