基于Vue2.0的分页组件


Posted in Javascript onMarch 16, 2017

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

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

基于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); 
   } 
  } 
 } 
});

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

Javascript 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
原生js实现验证码功能
Mar 16 #Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 #Javascript
vue图片加载与显示默认图片实例代码
Mar 16 #Javascript
js中作用域的实例解析
Mar 16 #Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 #Javascript
JS实现页面打印功能
Mar 16 #Javascript
Vue中添加过渡效果的方法
Mar 16 #Javascript
You might like
php中++i 与 i++ 的区别
2012/08/08 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
js加强的经典分页实例
2013/03/15 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
原生js开发的日历插件
2017/02/04 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python装饰器decorator用法实例
2014/11/10 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
Python内置加密模块用法解析
2019/11/25 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
Jar包的作用是什么
2014/03/30 面试题
党员四风问题个人对照检查材料
2014/10/26 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
高三毕业感言
2015/07/30 职场文书
2019 入党申请书范文
2019/07/10 职场文书