基于Vue2.0的分页组件

基于Vue2.0的分页组件

本文实例为大家分享了vue2.0分页组BMZdSUb件的具体实现代码，供大家参考，具体内容如下

整个示例打包了，有需要的可以下载，有不对的地方欢迎指出：vue分页组件

组件部分代码：

Vue.component('zpagenav', {

template: `

`

`

`

`

`共 {{total}} 条` +

``,

props: {

prevHtml: String,

nextHtml: String,

page: Number,

total: Number,

pageSize: Number,

maxPage: Number

},

computed: {

pageList: function () {

var _this = this, pageList = [];

let pageCount = Math.ceil(_this.total / _this.pageSize);

let page = _this.page;

let prevHtml = _this.prevHtml ? _this.prevHtml : '<';

let nextHtml = _this.nextHtml ? _this.nextHtml : '>';

let maxPage = _this.maxPage ? _this.maxPage : 9;

let hasPrev = page > 1;

let hasNext = page < pageCount;

//上一页

pageList.push({

class: hasPrev ? '' : 'disabled',

page: hasPrev ? page - 1 : page,

html: prevHtml

});

//首页

pageList.push({

class: page == 1 ? 'active' : '',

page: 1,

html: 1

});

var p0 = Math.floor(maxPage / 2);

var p1 = 1 + 2 + p0; //首页+省略至少2个页码+中间页面数的一半

var start, end;

if (page >= p1) {

start = page - p0;

//前置省略号

pageList.push({

class: BMZdSUb'dot',

page: page,

html: '...'

});

} else {

start = 2;

}

var p2 =http:// page + p0;

if (p2 < pageCount) {

end = p2;

} else {

end = pageCount - 1;

}

//页码列表

for (let i = start; i <= end; i++) {

pageList.push({

class: page == i ? 'active' : '',

page: i,

html: i

});

}

if (end < pageCount - 1) {

//后置省略号

pageList.push({

class: 'dot',

page: page,

html: '...'

});

}

//尾页

if (pageCount > 1) {

pageList.push({

class: page == pageCount ? 'active' : '',

page: pageCount,

html: pageCount

});

}

//下一页

pageList.push({

class: hasNext ? '' : 'disabled',

page: hasNext ? page + 1 : page,

htmBMZdSUbl: nextHtml

});

return pageList;

}

},

methods: {

setPage: function (ithttp://em) {

if (item.class == '') {

this.$emit('pagehandler', item.page);

}

}

}

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。