当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 基于Vue2.0的分页组件

基于Vue2.0的分页组件

2018年05月03日  | 移动技术网IT编程  | 我要评论

李开复 做最好的自己,rania组合,吉林市洪水

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

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

组件部分代码：

vue.component('zpagenav', { 
 template: `<nav class="zpagenav">` + 
     `<ul class="page-ul">` + 
      `<li v-bind:key="index" v-for="(item,index) in pagelist" v-bind:class ="item.class" @click.stop="setpage(item)" v-html="item.html">` + 
      `</li>` + 
     `</ul>` + 
     `<span class="total">共 {{total}} 条</span>` + 
    `</nav>`, 
 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: 'dot', 
     page: page, 
     html: '...' 
    }); 
   } else { 
    start = 2; 
   } 
 
   var p2 = 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 
   }); 
 
   return pagelist; 
  } 
 }, 
 methods: { 
  setpage: function (item) { 
   if (item.class == '') { 
    this.$emit('pagehandler', item.page); 
   } 
  } 
 } 
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网