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 弹出登录窗口实现代码
Dec 24 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
angularjs基础教程
Dec 25 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
代码分析vue中如何配置less
Sep 28 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
Terran兵种对照表
2020/03/14 星际争霸
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
NOT NULL 和NULL
2007/01/15 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
window.returnValue使用方法示例介绍
2014/07/03 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
如何运行Python程序的方法
2013/04/21 Python
python复制文件代码实现
2013/12/23 Python
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
学生周末长期请假条
2014/02/15 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
SQL Server删除表中的重复数据
2022/05/25 SQL Server