整个示例打包了,有需要的可以下载,有不对的地方欢迎指出: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 });
varp0 = Math.floor(maxPage / 2); varp1 = 1 + 2 + p0;//首页+省略至少2个页码+中间页面数的一半
varstart, end; if(page >= p1) { start = page - p0; //前置省略号 pageList.push({ class:'dot', page: page, html:'...' }); }else{ start = 2; }
varp2 = 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, html: nextHtml });
returnpageList; } }, methods: { setPage:function(item) { if(item.class =='') { this.$emit('pagehandler', item.page); } } } }); |