基于Vue如何封装分页组件


Posted in Javascript onDecember 16, 2016

使用Vue做双向绑定的时候,可能经常会用到分页功能

接下来我们来封装一个分页组件

先定义样式文件 pagination.css

ul, li {
  margin: 0px;
  padding: 0px;
}
.page-bar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.page-button-disabled {
  color:#ddd !important;
}
.page-bar li {
  list-style: none;
  display: inline-block;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  cursor: pointer;
}
.page-bar a:hover {
  background-color: #eee;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}

js文件 pagination.js

(function (vue) {
  // html模板信息
  var template = '<div class="page-bar"> \
           <ul> \
            <li><a class="{{ setButtonClass(0) }}" v-on:click="prvePage(cur)">上一页</a></li> \
            <li v-for="index in indexs" v-bind:class="{ active: cur == index }"> \
             <a v-on:click="btnClick(index)">{{ index < 1 ? "..." : index }}</a> \
            </li> \
            <li><a class="{{ setButtonClass(1) }}" v-on:click="nextPage(cur)">下一页</a></li> \
           </ul> \
          </div>'
  var pagination = vue.extend({
    template: template,
    props: ['cur', 'all'],
    computed: {
      indexs: function () {
        var left = 1
        var right = this.all
        var ar = []
        if (this.all >= 11) {
          if (this.cur > 5 && this.cur < this.all - 4) {
            left = this.cur - 5
            right = this.cur + 4
          } else {
            if (this.cur <= 5) {
              left = 1
              right = 10
            } else {
              right = this.all
              left = this.all - 9
            }
          }
        }
        while (left <= right) {
          ar.push(left)
          left++
        }
        if (ar[0] > 1) {
          ar[0] = 1;
          ar[1] = -1;
        }
        if (ar[ar.length - 1] < this.all) {
          ar[ar.length - 1] = this.all;
          ar[ar.length - 2] = 0;
        }
        return ar
      }
    },
    methods: {
      // 页码点击事件
      btnClick: function (data) {
        if (data < 1) return;
        if (data != this.cur) {
          this.cur = data
          this.$dispatch('btn-click', data)
        }
      },
      // 下一页
      nextPage: function (data) {
        if (this.cur >= this.all) return;
        this.btnClick(this.cur + 1);
      },
      // 上一页
      prvePage: function (data) {
        if (this.cur <= 1) return;
        this.btnClick(this.cur - 1);
      },
      // 设置按钮禁用样式
      setButtonClass: function (isNextButton) {
        if (isNextButton) {
          return this.cur >= this.all ? "page-button-disabled" : ""
        }
        else {
          return this.cur <= 1 ? "page-button-disabled" : ""
        }
      }
    }
  })
  vue.Pagination = pagination
})(Vue)

pagination分页组件就封装好了,需要使用的时候,引入以上两个文件即可

接下来我们测试下效果

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title></title>
  <script src="vue.js"></script>
  <link href="pagination.css" rel="stylesheet" />
  <script src="pagination.js"></script>
</head>
<body>
  <div id="app">
    <vue-pagination :cur.sync="cur" :all.sync="all" v-on:btn-click="listen"></vue-pagination>
    <p>{{msg}}</p>
  </div>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        // 当前页码
        cur: 1,
        // 总页数
        all: 100,
        msg: ''
      },
      components: {
        // 引用组件
        'vue-pagination': Vue.Pagination
      },
      methods: {
        listen: function (data) {
          // 翻页会触发此事件
          this.msg = '当前页码:' + data
        }
      }
    })
  </script>
</body>
</html>

最终效果

基于Vue如何封装分页组件

页码切换事件在listen中处理即可

点击此处下载源码:源码下载地址

以上所述是小编给大家介绍的基于Vue如何封装分页组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
js读取cookie方法总结
Oct 31 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 #Javascript
详解如何较好的使用js
Dec 16 #Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 #Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 #Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 #Javascript
JS限制条件补全问题实例分析
Dec 16 #Javascript
Node.js用readline模块实现输入输出
Dec 16 #Javascript
You might like
JAVA/JSP学习系列之六
2006/10/09 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
如何判断php数组的维度
2013/06/10 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
Javascript变量函数浅析
2011/09/02 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python创建n行m列数组示例
2019/12/02 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
自主招生自荐信
2013/12/08 职场文书
单位介绍信格式
2015/01/31 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
关于使用Redisson订阅数问题
2022/01/18 Redis