基于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 相关文章推荐
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 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
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
跨浏览器的事件对象介绍
2012/06/27 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
存储过程和函数的区别
2013/05/28 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
优秀部门获奖感言
2014/02/14 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
健康状况证明书
2014/11/26 职场文书
经典导游欢迎词
2015/01/26 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
Java版 单机五子棋
2022/05/04 Java/Android