基于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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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 批量生成html,txt文件的实现代码
2013/06/26 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
python批量生成条形码的示例
2020/10/10 Python
初中政治教学反思
2014/01/17 职场文书
授权委托书格式
2014/07/31 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
JavaScript 原型与原型链详情
2021/11/02 Javascript
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript
python playwrigh框架入门安装使用
2022/07/23 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS