//作者使用的是vue2.0代碼速客，所以兼容部分大家要注意以下，
//比較忙五鲫，直接上代碼溺职，
//以下是子組件部分∥晃梗可以定義為pagination.vue
//布局部分
<template>
<div class="pager" v-show="pageNo == 1 ? false : true">
<button class="btn btn-pager" :disabled="current == 1" @click="prePage"><img :src="current == 1 ? perForbid : per" alt=""></button>
<span v-if="pageNo !== 1" :class="'page-index ' + (current == currentNo ? '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 ' + (current == pageNo ? 'active' : '')" @click="goPage(pageNo)">{{pageNo}}</span>
<button class="btn btn-pager" :disabled="current == pageNo" @click="nextPage"><img :src="current == pageNo ? nextForbid : next" alt=""></button>
</div>
</template>
//script 部分
<script>
//引入的是我這邊設(shè)置的圖片浪耘，可以用其他圖片替換
import Per from '../../assets/img/Per.png'
import PerForbid from '../../assets/img/PerForbid.png'
import Next from '../../assets/img/Next .png'
import NextForbid from '../../assets/img/NextForbid.png'
export default {
props: {
// 用于記錄總頁碼，可由父組件傳過來
pageNo: {
type: Number,
default: 1
},
// 用于記錄當(dāng)前頁數(shù)忆某，這個(gè)與父組件進(jìn)行數(shù)據(jù)交互來完成每一頁的數(shù)據(jù)更新点待，所以我們只要改變current的值來控制整個(gè)頁面的數(shù)據(jù)即可
currentNo: {
type: Number,
default: 1
}
},
data: function () {
return {
// 用于判斷省略號(hào)是否顯示
backClipped: true,
preClipped: false,
current:this.currentNo,
per:Per,
perForbid:PerForbid,
next:Next,
nextForbid:NextForbid,
}
},
methods: {
prePage () {
// 上一頁
this.current--
this.$emit('pagination',this.current);
},
nextPage () {
// 下一頁
this.current++;
this.$emit('pagination',this.current);
},
goPage (index) {
// 跳轉(zhuǎn)到相應(yīng)頁面
if (index !== this.current) {
this.current = index
this.$emit('pagination',this.current); //子組件值傳遞 父組件使用 this.current
}
}
},
created(){},
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í)顯示省略號(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)前頁碼的后2個(gè)
ret.push(this.current + 1)
ret.push(this.current + 2)
if (this.current < (this.pageNo - 3)) {
this.backClipped = true
}
} else {
this.backClipped = false
for (let i = (this.current + 1); i < this.pageNo; i++) {
ret.push(i)
}
}
// 返回整個(gè)頁碼組
return ret
}
}
}
</script>
//css部分 不過多說弃舒，這個(gè)可以自己改
<style scoped>
.pager {
text-align: center;
}
.btn-pager {
margin-left: 10px;
padding: 0px;
width: 24px;
height: 24px;
text-align: center;
background-color: #ffffff;
color: #ffffff;
border: none;
border-radius: 0px;
overflow: hidden;
vertical-align: middle;
outline: none;
cursor: pointer;
}
.btn-pager img{
width: 100%;height: 100%;
}
.page-index {
display: inline-block;
margin-left: 10px;
width: 24px;
height: 24px;
line-height: 24px;
background-color: #ffffff;
cursor: pointer;
font-size: 14px;
color: #000000;
vertical-align: middle;
}
.active {
background: #7C77E2;
border-radius: 4px;
color: #fff;
}
</style>
//父組件使用 template 布局部分
<pagination
:page-no="pageNo" //當(dāng)前分頁總數(shù)
:current-no.sync="currentPage" //當(dāng)前頁碼
@pagination="paginationClick" //響應(yīng)點(diǎn)擊事件函數(shù)
></pagination>
//父組件事件
paginationClick(current){ //響應(yīng)點(diǎn)擊后子組件當(dāng)前頁碼
console.log(current);
}
//這里需要注意的是這里并沒有初始化的部分，你需要在你的date值中初始化状原。
以下是現(xiàn)在組件的樣式~
image.png
最后分頁組件這個(gè)東東是根據(jù)簡(jiǎn)書博主的改造出來的聋呢，現(xiàn)在把鏈接貼出來拜一拜。
http://www.reibang.com/p/d17d8e35deda
