封装分页的组件。
template部分：
<div class="divuepagination">
<ul class="pagination">
<li v-show="di_coping" v-bind:class="{disabled:di_current==1}">
<a v-on:click="clickFirst">
<span>第一页
<li v-on:click="clickPrev" v-bind:class="{disabled:di_current==1}">
<span>上一页
<li v-for="(item,index) indi_pageNum" v-bind:class="{active:di_current==item}" v-on:click="clickCurrent(item)" v-show="di_showPageNum"><a>{{item}}
<li v-on:click="clickNext" v-bind:class="{disabled:di_current==di_pageCount}">
<span>下一页
<li v-show="di_coping" v-bind:class="{disabled:di_current==di_pageCount}">
<a v-on:click="clickLast">
<span>最后一页
<div class="divuepage">
<div class="divuepage-text" v-show="di_showPageCount">共{{di_pageCount}}页
<div class="divuepage-text" v-show="di_showTotalData">共{{di_totalData}}条记录
<input class="divuepage-input" type="text" v-model="skipvalue" v-show="di_showSkipPage" />
<button class="divuepage-btn" v-on:click="clickSkip" v-show="di_showSkipPage">跳转
javascript部分：
export default {
name:'divuePagination',
computed:{
di_current:function(){
return this.current
}, //存放返回当前第几页
di_count:function(){
if(this.count>=1){
return this.count
}else{
return this.options.count
}
}, //当前页前后页数 (默认：2)
di_pageCount:function(){
return this.pageCount?this.pageCount:this.options.pageCount
}, //存放返回总页数
di_showPageNum:function(){
return this.showPageNum==1?true:false
}, //是否显示页码
di_showPageCount:function(){
return this.showPageCount==1?true:false
}, //是否显示总页数
di_totalData:function(){
return this.totalData?this.totalData:this.options.totalData
}, //存放返回数据总条数
di_showTotalData:function(){
return this.showTotalData==1?true:false
}, //是否显示数据总条数
di_nextPage:function(){
return this.nextPage?this.nextPage:this.options.nextPage
}, //是否有下一页
di_coping:function(){
return this.coping==1?true:false
}, //是否开启首页尾页
di_showSkipPage:function(){
return this.showSkipPage==1?true:false
}, //是否显示跳页功能
di_pageNum:function(){//页码生成
var arr=[];//页码数组
var show_num_size=Number(this.di_count)*2+1;//依据当前页前后页数 计算总页码个数
if(this.di_pageCount<=show_num_size){
for(var i=1;i<=this.di_pageCount;i++){
arr.push(i);
}
}else{
if(this.di_current<=this.di_count){
for(var i=1;i<=show_num_size;i++){
arr.push(i);
}
}else if(this.di_current>this.di_pageCount-this.di_count){
for(var i=this.di_pageCount-show_num_size+1;i<=this.di_pageCount;i++){
arr.push(i);
}
}else{
for(var i=this.di_current-this.di_count;i<=Number(this.di_current)+Number(this.di_count);i++){
arr.push(i);
}
}
}
return arr;
}
},
data:function(){
return {
skipvalue:"", //跳页功能：输入框值
options:{//默认值配置
count:2, //当前页前后页数 (默认：2)
pageCount:1, //存放返回总页数
totalData:1, //存放返回数据总条数
nextPage:false //是否有下一页
}
}
},
props:["current","count","pageCount","showPageNum","showPageCount","totalData","showTotalData","nextPage","coping","showSkipPage"],
methods:{
clickFirst:function(){//点击第一页
if(this.di_current-1<1){
return false;
}
this.$emit("runAjax",1);
},
clickCurrent:function(item){//点击某一页
this.$emit("runAjax",item);
},
clickLast:function(){//点击最后一页
if(Number(this.di_current)+1>this.di_pageCount){
return false;
}
this.$emit("runAjax",this.di_pageCount);
},
clickPrev:function(){//点击上一页
if(this.di_current-1<1){
return false;
}
this.$emit("runAjax",this.di_current-1);
},
clickNext:function(){//点击下一页
if(Number(this.di_current)+1>this.di_pageCount){
return false;
}
this.$emit("runAjax",Number(this.di_current)+1);
},
clickSkip:function(){//点击下一页
if(isNaN(this.skipvalue)){
console.log("必须是数字")
return false;
}
if(this.skipvalue<1 ||this.skipvalue>this.di_pageCount){
console.log("超过范围")
return false;
}
this.$emit("runAjax",this.skipvalue);
}
},
created:function(){
}
}
style样式
.divuepagination{
text-align:center;
font-size:14px;
}
.divuepage{
display:inline-block;
padding-left:0;
margin:20px 0;
border-radius:4px;
vertical-align:top;
}
.divuepage .divuepage-text{
float:left;
padding:6px 12px;
line-height:1.42857143;
color:#337ab7;
margin:0 2px;
border-radius:4px;
border:none;
}
.divuepage .divuepage-btn{
float:left;
padding:6px 12px;
line-height:1.42857143;
color:#337ab7;
margin:0 2px;
border-radius:4px;
border:none;
border:1px solid #dddddd;
cursor:pointer;
}
.divuepage .divuepage-input{
width:40px;
float:left;
padding:6px 12px;
line-height:1.42857143;
color:#337ab7;
margin:0 2px;
border-radius:4px;
border:none;
border:1px solid #dddddd;
}
.pagination {
display:inline-block;
padding-left:0;
margin:20px 0;
border-radius:4px;
}
.pagination >li {
display:inline;
}
.pagination >li >a,
.pagination >li >span {
position:relative;
float:left;
padding:6px 12px;
line-height:1.42857143;
text-decoration:none;
color:#337ab7;
background-color:#ffffff;
border:1px solid #dddddd;
margin-left: -1px;
cursor:pointer;
}
.pagination >li:first-child >a,
.pagination >li:first-child >span {
margin-left:0;
border-bottom-left-radius:4px;
border-top-left-radius:4px;
}
.pagination >li:last-child >a,
.pagination >li:last-child >span {
border-bottom-right-radius:4px;
border-top-right-radius:4px;
}
.pagination >li >a:hover,
.pagination >li >span:hover,
.pagination >li >a:focus,
.pagination >li >span:focus {
z-index:2;
color:#23527c;
background-color:#eeeeee;
border-color:#dddddd;
}
.pagination > .active >a,
.pagination > .active >span,
.pagination > .active >a:hover,
.pagination > .active >span:hover,
.pagination > .active >a:focus,
.pagination > .active >span:focus {
z-index:3;
color:#ffffff;
background-color:#337ab7;
border-color:#337ab7;
cursor:default;
}
.pagination > .disabled >span,
.pagination > .disabled >span:hover,
.pagination > .disabled >span:focus,
.pagination > .disabled >a,
.pagination > .disabled >a:hover,
.pagination > .disabled >a:focus {
color:#777777;
background-color:#ffffff;
border-color:#dddddd;
cursor:not-allowed;
}
在router.js中
import divuePaginationfrom '@/module/divuePagination'
Vue.component('divue-pagination', divuePagination)
使用例子
<div class="page">
<h3 class="abc">//模拟ajax数据 共7页 32条<br/>演示内容：页码数量设置显示5个
<ul class="ull">
<li v-for="(item,index) inlist"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}
<divue-pagination
:current="current"
:count="count"
:pageCount="pageCount"
:showPageNum="showPageNum"
:showPageCount="showPageCount"
:totalData="totalData"
:showTotalData="showTotalData"
:nextPage="nextPage"
:coping="coping"
:showSkipPage="showSkipPage"
@runAjax="runAjax">
</divue-pagination>
export default {
name:"homePage",
data () {
return {
pagename:"首页",
list: [], //存放返回当前页的数据
current:1, //存放返回当前第几页
count:2, //当前页前后页数 (默认：2)
pageCount:"", //存放返回总页数
showPageNum:1, //是否显示页码 （默认值：1-显示 其他-不显示）
showPageCount:1, //是否显示总页数 （默认值：1-显示 其他-不显示）
totalData:"", //存放返回数据总条数
showTotalData:1, //是否显示数据总条数（默认值：1-显示 其他-不显示）
nextPage:false, //是否有下一页
coping:1, //是否开启首页尾页（默认值：1-显示 其他-不显示）
showSkipPage:1, //是否显示跳页功能（默认值：1-显示 其他-不显示）
}
},
methods:{
runAjax:function(current){
var that=this;
var list=[];
var pageCount="";
var nextPage="";
var totalData="";
//模拟ajax数据 1-7页
setTimeout(function(){
if(current==1){
list=[
{id:1,text:"我是显示内容111111"},
{id:2,text:"我是显示内容222222"},
{id:3,text:"我是显示内容3333333333"},
{id:4,text:"我是显示内容44444444444"},
{id:5,text:"我是显示内容555555555"},
]
pageCount=7;
nextPage=true;
totalData=32;
}else if(current==2){
list=[
{id:1,text:"我是显示内容66666666"},
{id:2,text:"我是显示内容7777777777"},
{id:3,text:"我是显示内容8888888888"},
{id:4,text:"我是显示内容99999999999"},
{id:5,text:"我是显示内容101010"},
]
pageCount=7;
nextPage=true;
totalData=32;
}else if(current==3){
list=[
{id:1,text:"我是显示内容111111111111111"},
{id:2,text:"我是显示内容121212"},
{id:3,text:"我是显示内容131313"},
{id:4,text:"我是显示内容141414"},
{id:5,text:"我是显示内容15515"},
]
pageCount=7;
nextPage=true;
totalData=32;
}else if(current==4){
list=[
{id:1,text:"我是显示内容161616"},
{id:2,text:"我是显示内容171717"},
{id:3,text:"我是显示内容181818"},
{id:4,text:"我是显示内容191919"},
{id:5,text:"我是显示内容202020"},
]
pageCount=7;
nextPage=true;
totalData=32;
}else if(current==5){
list=[
{id:1,text:"我是显示内容2121"},
{id:2,text:"我是显示内容22222"},
{id:3,text:"我是显示内容232323"},
{id:4,text:"我是显示内容242424"},
{id:5,text:"我是显示内容252525"},
]
pageCount=7;
nextPage=true;
totalData=32;
}else if(current==6){
list=[
{id:1,text:"我是显示内容2626"},
{id:2,text:"我是显示内容2727"},
{id:3,text:"我是显示内容2828"},
{id:4,text:"我是显示内容2929"},
{id:5,text:"我是显示内容3030"},
]
pageCount=7;
nextPage=true;
totalData=32;
}else if(current==7){
list=[
{id:1,text:"我是显示内容3131"},
{id:2,text:"我是显示内容3232"}
]
pageCount=7;
nextPage=false;
totalData=32;
};
that.list=list;
that.current=current;
that.pageCount=pageCount;
that.nextPage=nextPage;
that.totalData=totalData;
},200);
},
},
created:function(){
//模拟返回第一页数据
this.runAjax(1);
// //模拟返回第一页数据
// this.runAjax2(1);
// //模拟返回第一页数据
// this.runAjax3(1);
// //模拟返回第一页数据
// this.runAjax4(1);
// //模拟返回第一页数据
// this.runAjax5(1);
},
mounted:function(){
}
}
<style scoped>
.page{
margin-top:100px;
}
h3{text-align:left;}
ul{list-style:none;}
ull{margin:100px auto; width:1000px;line-height:30px;}
li{height:30px;}
.l{float:left;width:300px;}
.r{float:left;width:600px;}
