<template>
<div class="page-nav">
<div class="page-btn-wrap">
<span class="prev"
v-bind:class="{ disabled: currPage==1 }"
v-on:click="pagePrev"
>
上页
</span>
<span class="item
"v-bind:class="{ active: item==currPage }"
v-for="(item,index) in list"
:key="index"
v-on:click="pageTo(item)"
>
{{item}}
</span>
<span class="next"
v-bind:class="{ disabled: currPage==totalPage }"
v-on:click="pageNext"
>
下页
</span>
</div> </div>
</template> <script >
export default {
name:"page",
data(){
return{ sideNum:2, //显示页面按钮的一半，向下取整
currPage:1, //当前页面
totalPage:0, //需要分的页数, 例如有30条数据，每页为10条，则需要三页
list:[] }
}, props:{
"total":{
type: Number,
default:0
},
"pagesize":{
type:Number,
default:10,
},
"showPage":{
type:Number,
default:5
},
"pagenum":{
type:Number,
default:1
}
},
methods:{
getOffetSize:function(){
var that = this;
var start = 1;
var end = that.showPage;
if(that.totalPage < that.showPage) {
return {
start: 1,
end: this.totalPage
}
}
start = that.currPage - that.sideNum;
end = that.currPage + that.sideNum; if(start <= 1) {
start = 1;
end = that.showPage;
}
if(end >= that.totalPage) {
end = that.totalPage;
start = that.totalPage - 2 * that.sideNum;
} return {
start: start,
end: end
}
},
layout:function(){
//得到开始和结束
var that = this;
var list = [];
var opt = that.getOffetSize();
for(var i = opt.start ; i <= opt.end ; i++){
list.push(i);
}
that.list = list;
},
pageTo:function(pageNum){
var that = this;
that.currPage = pageNum;
that.layoutEmit();
},
pagePrev:function(){
var that = this;
var pageNum = that.currPage - 1; if(pageNum < 1){
return;
} that.currPage = pageNum;
that.layoutEmit();
},
pageNext:function(){
var that = this;
var pageNum = that.currPage + 1; if(pageNum > that.totalPage){
return;
}
that.currPage = pageNum;
that.layoutEmit();
},
layoutEmit(){
var that = this;
that.layout();
that.$emit("pagec",that.currPage);
}
},
watch:{
"total":function(newa,oldb){
var that = this;
that.currPage = 1;
console.log(newa,oldb);
that.totalPage = Math.ceil(newa / that.pagesize);
that.layout(); },
"pagenum":function(newa,oldb){
this.currPage = newa;
}
},
mounted:function(){
var that = this;
that.pagesize = that.pagesize || 10;
that.sildeNum = Math.floor(that.showPage / 2);
that.totalPage = Math.ceil(that.total / that.pagesize); that.layout(); }
}
</script> <style type="text/css" lang="less">
.page-nav{
.page-btn-wrap{
span{
display: inline-block;
width: 80px;
height: 26px;
line-height: 26px;
text-align: center;
border: 1px solid #ccc;
cursor: pointer;
}
span.prev,span.next{
width: 120px;
}
span.active{
background: #0099FF;
}
span.disabled{
background: #ccc;
}
}
}
</style>
使用
<page-btn
v-on:pagec="pagec"
:total="total"
:pagesize='opt.pagesize'
:pagenum='opt.pagenum'
></page-btn>