分頁(yè)組件在web項(xiàng)目中是十分常見的組件，讓我們用vue來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的分頁(yè)組件。
功能點(diǎn)：
1.點(diǎn)擊頁(yè)面序號(hào)可以跳轉(zhuǎn)到相應(yīng)頁(yè)面。
2.點(diǎn)擊上一頁(yè)或者下一頁(yè)可以跳轉(zhuǎn)頁(yè)面，當(dāng)頁(yè)面在第一頁(yè)時(shí)上一頁(yè)無(wú)法點(diǎn)擊，頁(yè)面在最后一頁(yè)時(shí)下一頁(yè)無(wú)法點(diǎn)擊。
3.一次顯示當(dāng)前頁(yè)面的前兩頁(yè)和后兩頁(yè)
4.當(dāng)當(dāng)前頁(yè)面的序號(hào)和第一頁(yè)與最后一頁(yè)相差三個(gè)以上時(shí)出現(xiàn)省略號(hào)
5.始終顯示第一頁(yè)和最后一頁(yè)，只有一頁(yè)的時(shí)候顯示一頁(yè)
組件代碼：
Pagination.vue
<!--
params:
pageNo: 總頁(yè)數(shù)
current: 當(dāng)前的頁(yè)碼
-->
<template>
<div class="pager">
<button class="btn btn-pager" :disabled="this.current == 1" @click="prePage">上一頁(yè)</button>
<span v-if="pageNo !== 1" class="page-index {{ 1 == current ? 'active':''}}" @click="goPage(1)">1</span>
<span v-if="preClipped" class="page-index">...</span>
<span v-for="index in pages" class="page-index {{ index == current ? 'active':''}} " @click="goPage(index)">{{index}}</span>
<span v-if="backClipped" class="page-index">...</span>
<span class="page-index {{ pageNo == current ? 'active':''}} " @click="goPage(pageNo)">{{pageNo}}</span>
<button class="btn btn-pager" :disabled="this.current == pageNo" @click="nextPage">下一頁(yè)</button>
</div>
</template>
1.給頁(yè)碼標(biāo)簽綁定class，使用對(duì)象語(yǔ)法，讓當(dāng)前的頁(yè)碼附上'active'類名，這樣可以動(dòng)態(tài)的得到active的樣式，使得當(dāng)前頁(yè)碼區(qū)別于其他頁(yè)碼
2.給button綁定:disabled屬性，讓按鈕在當(dāng)前頁(yè)面等于最后一頁(yè)或者第一頁(yè)時(shí)無(wú)法點(diǎn)擊
3.goPage方法綁定在頁(yè)碼標(biāo)簽上實(shí)現(xiàn)點(diǎn)擊頁(yè)面索引，跳轉(zhuǎn)到相應(yīng)頁(yè)面
4.prePage方法和nextPage方法綁定在button上實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
5.使用v-if指令動(dòng)態(tài)判斷省略號(hào)和第一頁(yè)是否能顯示
6使用v-for指令將所有應(yīng)該顯示的頁(yè)碼遍歷出來(lái)
JS部分就直接以注釋來(lái)說(shuō)明
<script>
export default {
props: {
// 用于記錄總頁(yè)碼，可由父組件傳過(guò)來(lái)
pageNo: {
type: Number,
default: 1
},
// 用于記錄當(dāng)前頁(yè)數(shù)，這個(gè)與父組件進(jìn)行數(shù)據(jù)交互來(lái)完成每一頁(yè)的數(shù)據(jù)更新，所以我們只要改變current的值來(lái)控制整個(gè)頁(yè)面的數(shù)據(jù)即可
current: {
type: Number,
default: 1
}
},
data: function () {
return {
// 用于判斷省略號(hào)是否顯示
backClipped: true,
preClipped: false
}
},
methods: {
prePage () {
// 上一頁(yè)
this.current--
},
nextPage () {
// 下一頁(yè)
this.current++
},
goPage (index) {
// 跳轉(zhuǎn)到相應(yīng)頁(yè)面
if (index !== this.current) {
this.current = index
}
}
},
computed: {
// 使用計(jì)算屬性來(lái)得到每次應(yīng)該顯示的頁(yè)碼
pages: function () {
let ret = []
if (this.current > 3) {
// 當(dāng)前頁(yè)碼大于三時(shí)，顯示當(dāng)前頁(yè)碼的前2個(gè)
ret.push(this.current - 2)
ret.push(this.current - 1)
if (this.current > 4) {
// 當(dāng)前頁(yè)與第一頁(yè)差距4以上時(shí)顯示省略號(hào)
this.preClipped = true
}
} else {
this.preClipped = false
for (let i = 2; i < this.current; i++) {
ret.push(i)
}
}
if (this.current !== this.pageNo && this.current !== 1) {
ret.push(this.current)
}
if (this.current < (this.pageNo - 2)) {
// 顯示當(dāng)前頁(yè)碼的后2個(gè)
ret.push(this.current + 1)
ret.push(this.current + 2)
if (this.current <= (this.pageNo - 3)) {
當(dāng)前頁(yè)與最后一頁(yè)差距3以上時(shí)顯示省略號(hào)
this.backClipped = true
}
} else {
this.backClipped = false
for (let i = (this.current + 1); i < this.pageNo; i++) {
ret.push(i)
}
}
// 返回整個(gè)頁(yè)碼組
return ret
}
}
}
</script>
// 組件樣式
<style scoped>
.pager {
text-align: center;
}
.btn-pager {
margin-left: 10px;
padding: 0px;
width: 60px;
height: 30px;
text-align: center;
background-color: #ffffff;
color: #000000;
border: 1px solid #e3e3e3;
border-radius: 0px;;
}
.btn-pager:hover {
background-color: #f2f2f2;
}
.page-index {
display: inline-block;
margin-left: 10px;
width: 35px;
height: 30px;
line-height: 30px;
background-color: #ffffff;
cursor: pointer;
color: #000000;
}
.active {
color: #ffffff;
background-color: #0bbe06;
}
</style>
配合父組件使用
<pagination :page-no="pageNo" :current.sync="currentPage"></pagination>
// 從父組件使用該分頁(yè)組件的地方傳遞總頁(yè)碼pageNo
// 父組件與該分頁(yè)組件雙向綁定current
// 使用currentPage 來(lái)更新頁(yè)面需要的數(shù)據(jù)
watch: {
currentPage: 'requestData'
},
ready () {
this.requestData()
},
data () {
return {
currentPage: 1
}
},
methods: {
requestData () {
// 在這里使用ajax或者fetch將對(duì)應(yīng)頁(yè)傳過(guò)去獲取數(shù)據(jù)即可
}
}
完成后的效果圖：
