基于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调试说明
Jun 07 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
javascript关于“时间”的一次探索
Jul 24 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
php 中的str_replace 函数总结
2007/04/27 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
JavaScript实现京东放大镜效果
2019/12/03 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python中cPickle用法例子分享
2014/01/03 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python书单 不将就
2017/07/11 Python
python代码区分大小写吗
2020/06/17 Python
python如何快速生成时间戳
2020/07/21 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
如何写辞职书
2015/02/26 职场文书
教师节老师寄语
2015/05/28 职场文书
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库