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 相关文章推荐
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 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世纪万年历
2006/12/06 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Python yield使用方法示例
2013/12/04 Python
Python实现自动上京东抢手机
2018/02/06 Python
详解python的argpare和click模块小结
2019/03/31 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Python3.9新特性详解
2020/10/10 Python
详解pandas赋值失败问题解决
2020/11/29 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
网上快餐厅创业计划书
2014/02/01 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
仓库管理计划书
2014/05/04 职场文书
文明社区申报材料
2014/08/21 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
学校就业保障协议书
2019/06/24 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Python中使用ipython的详细教程
2021/06/22 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
使用Python获取字典键对应值的方法
2022/04/26 Python