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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
浅析javascript的return语句
Dec 15 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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通用分页类page.php[仿google分页]
2008/08/31 PHP
php 三维饼图的实现代码
2008/09/28 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python+Wordpress制作小说站
2017/04/14 Python
Django视图和URL配置详解
2018/01/31 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
员工年终自我评价
2014/09/14 职场文书
党员个人党性分析材料
2014/12/18 职场文书
医院感染管理制度
2015/08/05 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书