html vue分页,使用Vue开发一个分页插件

组件是Vue最强大的功能之一，可以扩展HTML功能，封装可重用的代码。分页组件是网页中常用的，本篇文章介绍如何简单封装一个分页组件。

我们使用全局注册的方式来开发一个组件，形式如下：

Vue.component('组件名称',{

...配置项

});

思路

我们通过props传入参数，在page组件内部计算需要显示的页码。

//props 参数

total //数据总条数

pagesize //每页显示数

page //当前页码

总页数计算：Math.ceil(total/pagesize)

当页码改变时，触发一个pagechange事件，父组件中可以捕获该事件。

代码

Vue.component('page',{

props:{

total:{

type:[Number,String],

default:0

},

pagesize:{

type:[Number,String],

default:1

},

page:{

type:[Number,String],

default:1

}

},

template:'

'+

'

• '+

'

上一页'+

'

首页'+

'

'+

'{{item}}'+

'

'+

'

尾页'+

'

下一页'+

'

总共{{totalCount}}页'+

'

'+

'

',

data(){

return {

totalCount:0 //总页数

}

},

computed:{

list(){

let list=[];

//计算总页数

this.totalCount=Math.ceil(this.total/this.pagesize);

//超限控制

if(this.page<=0){

this.page=1;

}

if(this.page>this.totalCount){

this.page=this.totalCount;

}

//计算显示页码

if(this.totalCount>5){

if(this.page>2&&this.page

list=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];

}else if(this.page<=2&&this.page>0){

for(let i=1;i<=5;i++){

list.push(i);

}

}else if(this.page>=this.totalCount-2&&this.page<=this.totalCount){

for(let i=4;i>=0;i--){

list.push(this.totalCount-i);

}

}

}else{

for(let i = 1;i<=this.totalCount;i++){

list.push(i);

}

}

return list;

}

},

methods:{

//页码点击事件

handleClick(e){

let page=parseInt(e.target.innerText);

let {count,total }=this;

this.$emit('pagechange',{page,count,total});

},

//前一页

prev(e){

if(!e.target.classList.contains['disable']){

this.page>1&&this.page--;

let {page,count,total }=this;

this.$emit('pagechange',{page,count,total});

}

},

//下一页

next(e){

if(!e.target.classList.contains['disable']){

this.page

let {page,pagesize,total }=this;

this.$emit('pagechange',{page,pagesize,total});

}

},

//首页

toFirst(){

let {page,pagesize,total }=this;

this.$emit('pagechange',{page:1,pagesize,total});

},

//尾页

toEnd(){

let {page,pagesize,total }=this;

this.$emit('pagechange',{page:this.totalCount,pagesize,total});

}

}

});

样式

div.page{

font-size: 12px;

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

color: #666;

user-select: none;

}

div.page ul{

padding: 0;

margin:0;

}

div.page ul li{

display: inline-block;

min-width:30px;

min-height:30px;

border-radius:3px;

line-height: 30px;

text-align: center;

margin: 0 6px;

cursor: pointer;

}

div.page ul li.active{

background: #1796e0;

color:#fff;

}

div.page ul li.disable{

color: #ccc;

}

使用方式

//html代码

...

//js代码

new Vue({

el:'#app',

data:{

page:1,

pageSize:5,

total:100

},

methods:{

pageChange(e){

this.page=e.page;

}

}

});

...

最终效果：