基于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 继承的实现
Jul 09 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
大学旷课检讨书
2014/01/28 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
通报表扬范文
2015/01/17 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers