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的获取mouse坐标插件的实现代码
Apr 01 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
node+express制作爬虫教程
Nov 11 Javascript
树结构之JavaScript
Jan 24 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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操作Redis常用技巧总结
2018/04/24 PHP
php中如何执行linux命令详解
2018/11/06 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
扩展String功能方法
2006/09/22 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Python logging模块用法示例
2018/08/28 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
java关于string最常出现的面试题整理
2021/01/18 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
警示教育活动总结
2014/05/05 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2014年平安夜寄语
2014/12/08 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js