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 相关文章推荐
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
详细分析JS函数去抖和节流
Dec 05 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
javascript贪吃蛇游戏设计与实现
Sep 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
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JS画线(实例代码)
2013/11/20 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python ldap实现登录实例代码
2016/09/30 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
渔夫的故事教学反思
2014/02/14 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
2015大学生实训报告
2014/11/05 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
研究生导师推荐信
2015/03/25 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
MySQL中order by的执行过程
2022/06/05 MySQL