基于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 相关文章推荐
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
原生js轮播特效
May 18 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
js实现无缝轮播图
Mar 09 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
javascript判断office版本示例
2014/04/11 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
JavaScript中this详解
2015/09/01 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
基于python的七种经典排序算法(推荐)
2016/12/08 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
Wallis官网:英国女装零售商
2020/01/21 全球购物
生产部岗位职责范文
2014/02/07 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
《画风》教学反思
2014/04/16 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
ES6 解构赋值的原理及运用
2021/05/25 Javascript