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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
移动节点的jquery代码
Jan 13 Javascript
jquery form 加载数据示例
Apr 21 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
js实现随机点名程序
Sep 17 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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/04 冲泡冲煮
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
大学生学习生活的自我评价
2013/11/01 职场文书
网络技术专业求职信
2014/07/13 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
公司出纳岗位职责
2015/03/31 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis