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 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
如何编写一个 Webpack Loader的实现
Oct 18 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
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php数组转成json格式的方法
2015/03/09 PHP
php header函数的常用http头设置
2015/06/25 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
Python splitlines使用技巧
2008/09/06 Python
21行Python代码实现拼写检查器
2016/01/25 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
如何清空python的变量
2020/07/05 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
信息部岗位职责
2013/11/12 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
体育教学随笔感言
2014/02/24 职场文书
小学生作文评语
2014/04/18 职场文书
车辆工程专业求职信
2014/06/14 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
学校工会工作总结2015
2015/05/19 职场文书
Python字符串常规操作小结
2022/04/03 Python
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python