溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1 .起因
今日看完element中分頁器的源碼實現,比較簡單,遂自己按著理解實現了一個簡單的分頁器,記錄下來,以便日后溫習.
2.實現難點
分頁器的實現難點主要是什么時候顯示分頁器的省略, 我的思路是: 規定一個值foldPage, 意為當前最多顯示的標簽數,當總頁數超過即顯示省略.省略分為左邊省略(folder1)和右邊省略(folder2),布局代碼如下:
<div class="pagination" @click="pageClick">
<button class="pre">上一頁</button>
<ul class="pages">
<li :class="['first', { 'active' : current == 1 }]" v-if="total">
1
</li>
<li :class="[ testLeft,goback]"
v-show="showPreMore"
@mouseenter="testLeft='more-left'"
@mouseleave="testLeft='more'"></li>
<li :class="['page-item', { 'active' : current == item }]" v-for="item in $pages">
{{ item }}
</li>
<li :class="[ testRight,gogo]"
v-show="showNextMore"
@mouseenter="testRight='more-right'"
@mouseleave="testRight='more'"></li>
<li :class="['last', { 'active' : current == $last }]" v-if="total">
{{ $last }}
</li>
</ul>
<button class="next">下一頁</button>
</div>
$pages是一個計算屬性,用于動態生成中間的頁碼,以及控制folder1和folder2的顯示,代碼如下:
computed:{
// 中間頁數組
$pages(){
const foldPage = this.foldPage
const current = Number(this.current)
const halfFoldPage = Math.floor((foldPage-2)/2)
if (this.$last > foldPage){
if (current - halfFoldPage > 2){
this.showPreMore = true
}else {
this.showPreMore = false
}
if (current + halfFoldPage < this.$last){
this.showNextMore = true
}else {
this.showNextMore = false
}
}
let array = []
// folder1顯示
if (this.showNextMore && !this.showPreMore){
for(let i = 2; i < foldPage; i++){
array.push(i)
}
// folder1 和 folder2都顯示
}else if ( this.showPreMore && this.showNextMore ){
for(let i = current - halfFoldPage; i <= current + halfFoldPage; i++ ){
array.push(i)
}
// folder2顯示
}else if (!this.showNextMore && this.showPreMore){
// 當folder2顯示的時候,頁碼不能大于$last,需要往前多顯示差額
let dis = current + halfFoldPage - this.$last + 1;
for(let i = current - halfFoldPage - dis ; i < this.$last; i++){
array.push(i)
}
// 都不顯示
}else {
for(let i = 2; i < this.$last; i++){
array.push(i)
}
}
return array
},
// 總頁數
$last(){
return Math.ceil(this.total/this.size)
}
}
所有的點擊都用一個函數處理, 根據e.target判斷點擊的目標.從而做出相應的邏輯:
methods:{
pageClick(e){
let newPage = Number(e.target.textContent)
this.current = Number(this.current);
if (!isNaN(newPage) && newPage){
this.current = newPage
}else {
// 下一頁
if (e.target.className.indexOf('next') != -1){
if (this.current == this.$last){
return;
}
this.current ++
}
// 上一頁
else if (e.target.className.indexOf('pre') != -1){
if (this.current == 1){
return
}
this.current --
}
// 省略向左
else if (e.target.className.indexOf('left') != -1){
this.current -= this.foldPage - 2
if (this.current <= 1){
this.current = 1
return
}
}
// 省略向右
else if(e.target.className.indexOf('right') != -1){
this.current += this.foldPage - 2
if (this.current >= this.$last){
this.current = this.$last
return
}
}
}
}
},
3.總結
pagination組件在element中算是一個很簡單的組件,靜下心來看不是很復雜,理解其思路以后可以自己嘗試去寫出來,細節可以無需在意.
總結
以上所述是小編給大家介紹的vue仿element實現分頁器效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
