当前位置是:汇盛国际 > 新闻动态 > 新闻动态

基于Vue2.0的分页组件

来源:caddoing.com 作者:前海 发布时间:2018-04-09 点击量:

  

[Vue,Vue2,0,分页组件,Vue]基于Vue2.0的分页组件

  

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

  

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

  

  

  

组件部分代码:  
  

  
  
  Vue.component('zpagenav', {  template: ``,  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);  }  }  }  }); 
  
  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

  




上一篇:汇盛国际:jQuery实现页面滚动时动态加载内容的方

下一篇:JavaScript 判断指定字符串是否为有效数字