最近项目中用到分页功能，而且领导还各种要求，自己就写了一个分页组件，然后因为刚开始总记录数的请求是异步请求，直接绑定子组件的话传值不成功，所以应用了bus.js作为中间件传值，因为最近比较忙，下面直接上代码：
page组件：
<template>
<!--分页组件-->
<div class="page">
<div style="display: inline-block;min-width: 150px;">
<ul class="pagination" v-if="currs!=0">
<li v-if="current == 1" style="cursor: not-allowed;">
<i class="el-icon-arrow-left"></i>
</li>
<li v-else @click="goto('plus')" class="li-hover">
<i class="el-icon-arrow-left"></i>
</li>
<li v-for="index in pages" @click="goto(index)" class="li-hover" :key="index" :style=" index == current? 'color: #fff;background:' + colorselects : '' ">
<template v-if="index/2">
{{ index }}
</template>
<template v-else>
<i class="el-icon-more"></i>
</template>
</li>
<li v-if="currs != current && currs != 0 " @click=" goto('add') " class="li-hover">
<i class="el-icon-arrow-right"></i>
</li>
<li v-else style="cursor: not-allowed;">
<i class="el-icon-arrow-right"></i>
</li>
</ul>
</div>
</div>
</template>
<script>
export default{
name:'page',
data() {
return {
showSize:10,//显示页标题个数根据这个确定
pageSize:15,//每页的记录
current:1,//当前页码
currs:0,//总页数
}
},
computed:{
// 获取当前的主题颜色,不需要的话可以去掉
colorselects(){
return this.$route.matched[0].meta.colorselect;
},
// 分页数据
pages: function() {
var pag = [];
if(this.currs < this.showSize) { //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.showSize,this.currs);
while(i) {
pag.unshift(i--);
}
} else { //总页数大于要显示的条数
pag.push(1)
var i = Math.ceil(this.showSize/2), middle = 2;
if (this.current < Math.ceil(this.showSize/2)) {//当前页码属于前面几个
while(i--) pag.push(middle++);
pag.push('right')
} else if (this.current > this.currs - (Math.ceil(this.showSize/2) - 1)) {//当前页码属于后面几个
pag.push('left')
middle = this.currs - i;
while(i--) pag.push(middle++);
} else {//当前页码属于中间那段
pag.push('left')
middle = this.current - 2;
while(i--) pag.push(middle++);
pag.push('right')
}
pag.push(this.currs)
}
return pag
}
},
methods: {
//点击获取分页数据
goto: function(index) {
if (this.current == index) return
// 根据传进来的值判断操作
switch (index) {
case 'left':
this.current = Math.ceil(this.current/2)
break;
case 'right':
this.current = Math.ceil(this.currs/2 + this.current/2)
break;
case 'plus':
this.current --
break;
case 'add':
this.current ++
break;
default:
this.current = index;
break;
}
// 向父组件传当前页码
this.$emit('current',this.current);
},
// 获取父组件传过来的值
getData(currs,pageSize,current){
this.currs = currs ? currs : 0;
this.pageSize = pageSize;
this.current = current;
}
},
created(){
this.$bus.on('doPage',this.getData)
},
beforeDestroy(){
this.$bus.off('doPage',this.getData)
},
}
</script>
<style scoped="scoped">
.page{
text-align: center;
margin: 10px 0;
}
.pagination {
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.pagination li {
cursor: pointer;
float: left;
margin: 0 5px;
font-size: 14px;
font-weight: 700;
height: 28px;
line-height: 28px;
background-color: #f4f4f5;
color: #606266;
min-width: 30px;
border-radius: 2px;
}
.li-hover:hover {
color: #7A98F7;
}
.pagination li.actives{
background: #9E071D;
color: #fff;
}
</style>bus.js
const install = (Vue) => {
const Bus = new Vue({
methods:{
emit (event,...args){//发送数据
this.$emit(event,...args)
},
on (event,callback){//绑定
this.$on(event,callback)
},
off (event,callback){//解绑
this.$off(event,callback)
},
}
})
Vue.prototype.$bus = Bus
}
export default install在main.js中引入：
import VueBus from './api/bus.js'
Vue.use(VueBus)
最后在相应的页面中引入page.vue子组件：
template中：<child @current='getCurrent'></child>
data中：
thisPage: '1', //当前页码
perPage: '6', //每页记录数
currs:'',//总页数
methods中：
// 获取页面组件传过来的值
getCurrent(data){
this.thisPage = data;
this.getData();
},
getData(){
请求成功后：
this.currs = Math.ceil(response.data.page.sumRecord/this.perPage)//这个根据后台返回来的具体再操作
this.$bus.emit('doPage',this.currs,this.perPage,this.thisPage)
}