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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
如何实现iframe父子传参通信
Feb 05 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 常用类汇总 推荐收藏
2010/05/13 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php命名空间学习详解
2014/02/27 PHP
微信支付开发发货通知实例
2016/07/12 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python中使用item()方法遍历字典的例子
2014/08/26 Python
基于python实现微信模板消息
2015/12/21 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python如何获取文件路径/目录
2020/09/22 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
.net软件工程师面试题
2015/03/31 面试题
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
助学贷款贫困证明
2014/09/23 职场文书
医生辞职信范文
2015/03/02 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python