分頁組件在web項(xiàng)目中是十分常見的組件初茶，讓我們用vue來實(shí)現(xiàn)一個(gè)簡單的分頁組件。
功能點(diǎn)：
1.點(diǎn)擊頁面序號可以跳轉(zhuǎn)到相應(yīng)頁面浊闪。
2.點(diǎn)擊上一頁或者下一頁可以跳轉(zhuǎn)頁面恼布，當(dāng)頁面在第一頁時(shí)上一頁無法點(diǎn)擊，頁面在最后一頁時(shí)下一頁無法點(diǎn)擊搁宾。
3.一次顯示當(dāng)前頁面的前兩頁和后兩頁
4.當(dāng)當(dāng)前頁面的序號和第一頁與最后一頁相差三個(gè)以上時(shí)出現(xiàn)省略號
5.始終顯示第一頁和最后一頁折汞，只有一頁的時(shí)候顯示一頁
組件代碼：
Pagination.vue
<!--
params:
pageNo: 總頁數(shù)
current: 當(dāng)前的頁碼
-->
<template>
<div class="pager">
<button class="btn btn-pager" :disabled="this.current == 1" @click="prePage">上一頁</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">下一頁</button>
</div>
</template>
1.給頁碼標(biāo)簽綁定class，使用對象語法盖腿，讓當(dāng)前的頁碼附上'active'類名爽待，這樣可以動態(tài)的得到active的樣式，使得當(dāng)前頁碼區(qū)別于其他頁碼
2.給button綁定:disabled屬性奸忽，讓按鈕在當(dāng)前頁面等于最后一頁或者第一頁時(shí)無法點(diǎn)擊
3.goPage方法綁定在頁碼標(biāo)簽上實(shí)現(xiàn)點(diǎn)擊頁面索引堕伪，跳轉(zhuǎn)到相應(yīng)頁面
4.prePage方法和nextPage方法綁定在button上實(shí)現(xiàn)頁面跳轉(zhuǎn)
5.使用v-if指令動態(tài)判斷省略號和第一頁是否能顯示
6使用v-for指令將所有應(yīng)該顯示的頁碼遍歷出來
JS部分就直接以注釋來說明
<script>
export default {
props: {
// 用于記錄總頁碼，可由父組件傳過來
pageNo: {
type: Number,
default: 1
},
// 用于記錄當(dāng)前頁數(shù)栗菜，這個(gè)與父組件進(jìn)行數(shù)據(jù)交互來完成每一頁的數(shù)據(jù)更新欠雌，所以我們只要改變current的值來控制整個(gè)頁面的數(shù)據(jù)即可
current: {
type: Number,
default: 1
}
},
data: function () {
return {
// 用于判斷省略號是否顯示
backClipped: true,
preClipped: false
}
},
methods: {
prePage () {
// 上一頁
this.current--
},
nextPage () {
// 下一頁
this.current++
},
goPage (index) {
// 跳轉(zhuǎn)到相應(yīng)頁面
if (index !== this.current) {
this.current = index
}
}
},
computed: {
// 使用計(jì)算屬性來得到每次應(yīng)該顯示的頁碼
pages: function () {
let ret = []
if (this.current > 3) {
// 當(dāng)前頁碼大于三時(shí)，顯示當(dāng)前頁碼的前2個(gè)
ret.push(this.current - 2)
ret.push(this.current - 1)
if (this.current > 4) {
// 當(dāng)前頁與第一頁差距4以上時(shí)顯示省略號
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)前頁碼的后2個(gè)
ret.push(this.current + 1)
ret.push(this.current + 2)
if (this.current <= (this.pageNo - 3)) {
當(dāng)前頁與最后一頁差距3以上時(shí)顯示省略號
this.backClipped = true
}
} else {
this.backClipped = false
for (let i = (this.current + 1); i < this.pageNo; i++) {
ret.push(i)
}
}
// 返回整個(gè)頁碼組
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>
// 從父組件使用該分頁組件的地方傳遞總頁碼pageNo
// 父組件與該分頁組件雙向綁定current
// 使用currentPage 來更新頁面需要的數(shù)據(jù)
watch: {
currentPage: 'requestData'
},
ready () {
this.requestData()
},
data () {
return {
currentPage: 1
}
},
methods: {
requestData () {
// 在這里使用ajax或者fetch將對應(yīng)頁傳過去獲取數(shù)據(jù)即可
}
}
完成后的效果圖：
分頁組件
分頁組件
