vue仿element实现分页器效果


Posted in Javascript onSeptember 13, 2018

1 .起因

今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习.

2.实现难点

分页器的实现难点主要是什么时候显示分页器的省略, 我的思路是: 规定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下:

<div class="pagination" @click="pageClick">
    <button class="pre">上一页</button>
    <ul class="pages">
      <li :class="['first', { 'active' : current == 1 }]" v-if="total">
        1
      </li>
      <li :class="[ testLeft,goback]"
        v-show="showPreMore"
        @mouseenter="testLeft='more-left'"
        @mouseleave="testLeft='more'"></li>
      <li :class="['page-item', { 'active' : current == item }]" v-for="item in $pages">
        {{ item }}
      </li>
      <li :class="[ testRight,gogo]" 
        v-show="showNextMore"
        @mouseenter="testRight='more-right'"
        @mouseleave="testRight='more'"></li>
      <li :class="['last', { 'active' : current == $last }]" v-if="total">
        {{ $last }}
      </li>
    </ul>
    <button class="next">下一页</button>
  </div>

$pages是一个计算属性,用于动态生成中间的页码,以及控制folder1和folder2的显示,代码如下:

computed:{
    // 中间页数组
    $pages(){
      const foldPage = this.foldPage 
      const current = Number(this.current)
      const halfFoldPage = Math.floor((foldPage-2)/2) 
      if (this.$last > foldPage){
        if (current - halfFoldPage > 2){
          this.showPreMore = true
        }else {
          this.showPreMore = false
        }
        if (current + halfFoldPage < this.$last){
          this.showNextMore = true
        }else {
          this.showNextMore = false
        }
      }
      let array = []
      // folder1显示
      if (this.showNextMore && !this.showPreMore){
        for(let i = 2; i < foldPage; i++){
          array.push(i)
        }
      // folder1 和 folder2都显示
      }else if ( this.showPreMore && this.showNextMore ){
        for(let i = current - halfFoldPage; i <= current + halfFoldPage; i++ ){
          array.push(i)
        }
      // folder2显示
      }else if (!this.showNextMore && this.showPreMore){
        // 当folder2显示的时候,页码不能大于$last,需要往前多显示差额
        let dis = current + halfFoldPage - this.$last + 1;
        for(let i = current - halfFoldPage - dis ; i < this.$last; i++){
          array.push(i)
        }
      // 都不显示
      }else {
        for(let i = 2; i < this.$last; i++){
          array.push(i)
        }
      }
      return array
    },
    // 总页数
    $last(){             
      return Math.ceil(this.total/this.size)
    }
  }

所有的点击都用一个函数处理, 根据e.target判断点击的目标.从而做出相应的逻辑:

methods:{
    pageClick(e){
      let newPage = Number(e.target.textContent)
      this.current = Number(this.current);

      if (!isNaN(newPage) && newPage){
        this.current = newPage
      }else {
        // 下一页
        if (e.target.className.indexOf('next') != -1){
          if (this.current == this.$last){
            return;
          }
          this.current ++
        }
        // 上一页
        else if (e.target.className.indexOf('pre') != -1){
          if (this.current == 1){
            return
          }
          this.current --
        }
        // 省略向左
        else if (e.target.className.indexOf('left') != -1){
          this.current -= this.foldPage - 2

          if (this.current <= 1){
            this.current = 1
            return
          }
        }
        // 省略向右
        else if(e.target.className.indexOf('right') != -1){
          this.current += this.foldPage - 2
          
          if (this.current >= this.$last){
            this.current = this.$last
            return 
          }
        }

      }
    }
  },

3.总结

pagination组件在element中算是一个很简单的组件,静下心来看不是很复杂,理解其思路以后可以自己尝试去写出来,细节可以无需在意.

总结

以上所述是小编给大家介绍的vue仿element实现分页器效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
区别JavaScript函数声明与变量声明
Sep 12 #Javascript
详解js中Array的方法及技巧
Sep 12 #Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 #Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 #Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 #Javascript
vue服务端渲染缓存应用详解
Sep 12 #Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
火车头采集器3.0采集图文教程
2007/03/17 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
JavaScript实现三级级联特效
2017/11/05 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python 字符串和整数的转换方法
2018/06/25 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python中count函数简单用法
2020/01/05 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
总经理岗位职责
2013/11/09 职场文书
初中化学教学反思
2014/01/23 职场文书
业务员的岗位职责
2014/03/15 职场文书
中国好声音华少广告词
2014/03/17 职场文书
校外活动方案
2014/08/28 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年公司工作总结
2015/04/25 职场文书
保护校园环境倡议书
2015/04/28 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏