Vue分页组件实例代码


Posted in Javascript onApril 17, 2017

当前组件依赖bootstrap样式,使用前请先引用相关css。

Vue.component('pagination', {
  template: `<nav aria-label="Page navigation">
    <ul class="pagination">
      <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(1)" title="首页" aria-label="首页"><i class="fa fa-fast-backward"></i></a></li>
      <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(pageNum - 1)" title="上一页" aria-label="上一页"><i class="fa fa-backward"></i></a></li>
      <li v-if="pageNum > 4"><a href="#" v-on:click.prevent="turnToPage(pageNum - 4)">...</a></li>
      <li v-if="pageNum <= 4 && pageNum >1"><a href="#" v-on:click.prevent="turnToPage(1)">1</a></li>
      <li v-if="pageNum - 3 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 3)">{{pageNum-3}}</a></li>
      <li v-if="pageNum - 2 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 2)">{{pageNum-2}}</a></li>
      <li v-if="pageNum - 1 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 1)">{{pageNum-1}}</a></li>
      <li class="active"><a href="#" v-on:click.prevent="turnToPage(pageNum)">{{pageNum}}</a></li>
      <li v-if="pageNum + 1 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum + 1)">{{pageNum+1}}</a></li>
      <li v-if="pageNum + 2 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum + 2)">{{pageNum+2}}</a></li>
      <li v-if="pageNum + 3 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum + 3)">{{pageNum+3}}</a></li>
      <li v-if="pageNum >= pageTotal - 4 && pageNum < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageTotal)">{{pageTotal}}</a></li>
      <li v-if="pageNum < pageTotal - 4"><a href="#" v-on:click.prevent="turnToPage(pageNum + 4)">...</a></li>
      <li :class="{'disabled': pageNum == pageTotal}"><a href="#" v-on:click.prevent="turnToPage(pageNum + 1)" title="下一页" aria-label="下一页"><i class="fa fa-forward"></i></a></li>
      <li :class="{'disabled': pageNum == pageTotal}"><a href="#" v-on:click.prevent="turnToPage(pageTotal)" title="尾页" aria-label="尾页"><i class="fa fa-fast-forward"></i></a></li>
    </ul>
  </nav>`,
  props: {
    pageNum: Number,
    pageSize: Number,
    totalItemCount: Number,
  },
  computed: {
    pageTotal: function () {
      return Math.ceil(this.totalItemCount / this.pageSize)
    }
  },
  methods: {
    turnToPage: function (num) {
      if (num > this.pageTotal || num <= 0) {
        //toastr.error(`当前页码超出了范围。页码:${num}`, '错误')
        return false
      }
      this.$emit('change', num)
    }
  }
})

props定义三个属性:当前页码,当前页显示数量,总数量

computed定义了一个计算方法:获取总数量/当前页显示数量,向上取整,默认取10个

methods定义了一个根据页码跳转方法:最终用于触发change事件,$emit用于抛出自定义事件,组件外可以捕获当前定义的change事件

html组件显示:

<pagination :page-num="criteria.page.num" :page-size="criteria.page.size" :total-item-count="itemsCount" v-on:change="skiptoPage"></pagination>

以上的值为自己传入的值
let vm = new Vue({
  el: '#app',
  data: {
    criteria: {
      keyword: '',
      page: { num: 1, size: 10 }
    },
    itemsCount: 0
  },
methods: {



skiptoPage: function (num) {  




this.criteria.page.num = num;


}

}
});

以上方法是自定义事件change的方法,你们可以自己去修改内容。

效果图

Vue分页组件实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
js微信分享API
Oct 11 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
Node.js使用Angular简单示例
May 11 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 #Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 #Javascript
老生常谈jacascript DOM节点获取
Apr 17 #Javascript
老生常谈combobox和combotree模糊查询
Apr 17 #Javascript
vue实现简单表格组件实例详解
Apr 16 #Javascript
JavaScript实现网页头部进度条刷新
Apr 16 #Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 #Javascript
You might like
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
开放系统互连参考模型
2016/06/29 面试题
new修饰符是起什么作用
2015/06/28 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
初婚初育证明范本
2014/11/24 职场文书
2015元旦节寄语
2014/12/08 职场文书
前台文员岗位职责
2015/02/04 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书