基于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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
js里面的变量范围分享
Jul 18 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
JavaScript十大取整方法实例教程
Dec 03 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
递归列出所有文件和目录
2006/10/09 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
javascript一点特殊用法
2008/05/28 Javascript
js no-repeat写法 背景不重复
2009/03/18 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
js面向对象的写法
2016/02/19 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python简单实例训练(21~30)
2017/11/15 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
什么是聚集索引和非聚集索引
2012/01/17 面试题
学习决心书
2014/03/11 职场文书
书香校园建设方案
2014/05/02 职场文书
初级党校心得体会
2014/09/11 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫