基于vue实现分页/翻页组件paginator示例
序言
项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教
当页数小于999(包括999)页
页数大于999页
首页或尾页disabled
10页之内显示
Usage
参数
pageCount: 整数,代表总页数
监听事件
@togglePage: 监听切换页面事件,可以获取到当前前往页的页数
父组件调用方法 index.vue
<template lang="html"> <div> <paginator :pageCount="pageCount" @togglePage="togglePage($event)"></paginator> </div> </template> <script> export default { data(){ return{ //总页数 pageCount: 24 } }, methods:{ togglePage(indexPage){ //打印出当前页数 console.log(indexPage); }, } } </script>
分页组件 paginator.vue
<template lang="html"> <div class="pagination"> <ul> <li :class="{disabled: curPage == 1}" @click="prevPage" v-if="pageCount > 1">上一页</li> <li :class="{active: curPage == 1}" @click="page(1)">1</li> <li class="ellipsis" v-show="curPage > 5 && pageCount > 10">...</li> <li :class="{active: curPage == index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">{{index+offset}}</li> <li class="ellipsis" v-show="curPage < bigLimit && pageCount > 10">...</li> <li :class="{active: curPage == pageCount}" @click="page(pageCount)" v-if="pageCount > 1">{{pageCount}}</li> <li :class="{disabled: curPage == pageCount}" @click="nextPage" v-if="pageCount > 1">下一页</li> </ul> </div> </template> <script> export default { props:['pageCount'], data(){ return { curPage: 1, }; }, computed:{ middlePages(){ if(this.pageCount <= 2){ return 0; }else if(this.pageCount> 2 && this.pageCount <= 10){ return this.pageCount-2; }else{ return this.curPage > 999 ? 5 : 8; } }, bigLimit(){ return this.middlePages > 5 ? this.pageCount-6 : this.pageCount -3; }, offset(){ if(this.curPage <= 5){ return 2; }else if(this.curPage >= this.bigLimit){ return this.bigLimit-2; }else{ return this.middlePages > 5 ? this.curPage-3 : this.curPage-2; } } }, methods:{ page(indexPage){ this.$emit('togglePage',indexPage); this.curPage = indexPage; }, prevPage(){ if(this.curPage != 1){ this.page(this.curPage-1); } }, nextPage(){ if(this.curPage != this.pageCount){ this.page(this.curPage+1); } } } }; </script> <style lang="css" scoped> @import 'styles/vars.css'; .pagination{ width: 660px; text-align: center; ul{ margin: 40px 0 60px 0; li{ cursor: pointer; display: inline-block; padding: 5px 9px; border: 1px solid #e1e1eb; margin-right: 5px; &.active{ background: #4078c0; color: #fff; } &.ellipsis{ border: none; } &.disabled{ color: #dcdcdc; } } } } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
本篇文章主要介绍了详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06Vue中使用addEventListener添加事件、removeEventListener移除事件的示例详解
最近在项目中需要用到addEventListener监听滚动条滚动的高度,所以就研究了一下在vue中是怎么进行事件监听的,添加事件和移除事件结合示例代码给大家介绍的非常详细,需要的朋友参考下吧2022-12-12Vue 2.5.2下axios + express 本地请求404的解决方法
下面小编就为大家分享一篇Vue 2.5.2下axios + express 本地请求404的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论