基于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 相关文章推荐
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
简单了解JavaScript异步
May 23 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
vue实现简单加法计算器
Oct 22 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中对数据库操作的封装
2006/10/09 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
详解PHP数组赋值方法
2015/11/07 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
js查找节点的方法小结
2015/01/13 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
财务人员个人求职信范文
2013/12/04 职场文书
安全教育心得体会
2013/12/29 职场文书
高中英语教学反思
2014/02/04 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle