溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
序言
項目需要自己寫了一個基于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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
