這篇文章將為大家詳細講解有關使用Vue怎么構建一個可重用的分頁組件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
基本結構
分頁組件應該允許用戶訪問第一個和最后一個頁面，向前和向后移動，并直接切換到近距離的頁面。
大多數應用程序在用戶每次更改頁面時都會發出API請求。我們需要確保組件允許這樣做，但是我們不希望在組件內發出這樣的請求。這樣，我們將確保組件在整個應用程序中是可重用的，并且請求都是在操作或服務層中進行的。我們可以通過使用用戶單擊的頁面的數字觸發事件來實現此目的。
有幾種可能的方法來實現API端點上的分頁。對于這個例子，我們假設API告訴我們每個頁面的結果數、頁面總數和當前頁面。這些將是我們的動態 props 。
相反，如果API只告訴記錄的總數，那么我們可以通過將結果的數量除以每一頁的結果數來計算頁數： totalResults / resultsPerPage 。
我們想要渲染一個按鈕到 第一頁 、 上一頁 、 頁面數量范圍 、 下一頁 和 最后一頁 ：
[first] [next] [1] [2] [3] [previous] [last]
比如像下圖這樣的一個效果：
盡管我們希望渲染一個系列的頁面，但并不希望渲染所有可用頁面。讓我們允許在我們的組件中設置一個最多可見按鈕的 props 。
既然我們知道了我們想要的組件要做成什么，需要哪些數據，我們就可以設置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('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 組件，如果調用這個組件：
<div id="app"> <pagination></pagination> </div>
這個時候看到的效果如下：
注意，為了能讓組件看上去好看一點，給組件添加了一點樣式。
事件監聽
現在我們需要通知父組件，當用戶單擊按鈕時，用戶點擊了哪個按鈕。
我們需要為每個按鈕添加一個事件監聽器。 v-on 指令 允許偵聽DOM事件。在本例中，我將使用 v-on 的快捷鍵 來偵聽單擊事件。
為了通知父節點，我們將使用 $emit 方法 來發出一個帶有頁面點擊的事件。
我們還要確保分頁按鈕只有在頁面可用時才唯一一個當前狀態。為了這樣做，將使用 v-bind 將 disabled 屬性的值與當前頁面綁定。我們還是使用 :v-bind 的快捷鍵 : 。
為了保持我們的 template 干凈，將使用 computed 屬性 來檢查按鈕是否被禁用。使用 computed 也會被緩存，這意味著只要 currentPage 不會更改，對相同計算屬性的幾個訪問將返回先前計算的結果，而不必再次運行該函數。
<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)
}
}
})在調用 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
}
}
})運行上面的代碼，將會報錯：
不難發現，在 pagination 組件中，咱們還少了 pages 。從前面介紹的內容，我們不難發現，需要計算出 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)
}
}
})這個時候得到的結果不再報錯，你在瀏覽器中將看到下圖這樣的效果：
添加樣式
現在我們的組件實現了最初想要的所有功能，而且添加了一些樣式，讓它看起來更像一個分頁組件，而不僅像是一個列表。
我們還希望用戶能夠清楚地識別他們所在的頁面。讓我們改變表示當前頁面的按鈕的顏色。
為此，我們可以使用對象語法將HTML類綁定到當前頁面按鈕上。當使用對象語法綁定類名時，Vue將在值發生變化時自動切換類。
雖然 v-for 中的每個塊都可以訪問父作用域范圍，但是我們將使用 method 來檢查頁面是否處于 active 狀態，以便保持我們的 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 中添加當前狀態：
<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: '#app',
data () {
return {
currentPage: 2
}
},
methods: {
onPageChange: function (page) {
console.log(page)
this.currentPage = page;
}
}
})在調用組件時：
<div id="app"> <pagination :total-pages="11" :total="120" :current-page="currentPage" @pagechanged="onPageChange"></pagination> </div>
這個時候的效果如下了：
到這里，基本上實現了咱想要的分頁組件效果。
無障礙化處理
熟悉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 相關的屬性就加上了：
關于使用Vue怎么構建一個可重用的分頁組件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
