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 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
vue使用canvas实现移动端手写签名
Sep 22 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
javascript常用的方法整理
2015/08/20 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python列表切片操作实例总结
2019/02/19 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
python绘制汉诺塔
2021/03/01 Python
PHP如何自定义函数
2016/09/16 面试题
家长给小学生的评语
2014/01/30 职场文书
一名老师的自我评价
2014/02/07 职场文书
关于读书的活动方案
2014/08/14 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
庆祝国庆节标语
2014/10/09 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
二年级作文之动物作文
2019/11/13 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫