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 相关文章推荐
jQuery之日期选择器的深入解析
Jun 19 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
详解javascript函数写法大全
Mar 25 Javascript
详解如何修改 node_modules 里的文件
May 22 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
php生成word并下载代码实例
2019/03/15 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python中的集合类型知识讲解
2015/08/19 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
总经理助理职责
2014/02/04 职场文书
求职个人评价范文
2014/04/09 职场文书
三八妇女节活动总结
2014/05/04 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
金秋助学感谢信
2015/01/21 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS