//作者使用的是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>
//引入的是我这边设置的图片，可以用其他图片替换
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
},
// 用于记录当前页数，这个与父组件进行数据交互来完成每一页的数据更新，所以我们只要改变current的值来控制整个页面的数据即可
currentNo: {
type: Number,
default: 1
}
},
data: function () {
return {
// 用于判断省略号是否显示
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) {
// 跳转到相应页面
if (index !== this.current) {
this.current = index
this.$emit('pagination',this.current); //子组件值传递 父组件使用 this.current
}
}
},
created(){},
computed: {
// 使用计算属性来得到每次应该显示的页码
pages: function () {
let ret = []
if (this.current > 3) {
// 当前页码大于三时，显示当前页码的前2个
ret.push(this.current - 2)
ret.push(this.current - 1)
if (this.current > 4) {
// 当前页与第一页差距4以上时显示省略号
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)) {
// 显示当前页码的后2个
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)
}
}
// 返回整个页码组
return ret
}
}
}
</script>
//css部分 不过多说，这个可以自己改
<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" //当前分页总数
:current-no.sync="currentPage" //当前页码
@pagination="paginationClick" //响应点击事件函数
></pagination>
//父组件事件
paginationClick(current){ //响应点击后子组件当前页码
console.log(current);
}
//这里需要注意的是这里并没有初始化的部分，你需要在你的date值中初始化。
以下是现在组件的样式~
image.png
最后分页组件这个东东是根据简书博主的改造出来的，现在把链接贴出来拜一拜。
http://www.jianshu.com/p/d17d8e35deda
