|
Először is, az utolsó renderelési hullám: ![]()
Alapvető elemekElőször is, a pager komponens (ezelőtti néven "pager komponens") által általánosan birtokolt elemek a következők: Az inicializációhoz szükséges konfigurációk a következők: totalPage initPage showPrev (hogy az előző oldal is megjelenjen-e) showNext (hogy a következő oldalt is megjelenítsék-e) showItems (néhány oldal a közepén) showJump (hogy megmutassa-e az ugrást melyik oldalra)
Ezeket a Vue kellékein keresztül lehet átvenni. Ezen felül a pager komponensnek is szüksége van egy currentPage-re, amely rögzíti az aktuális oldalt, a pages tömböt használják a középen megjelenített oldalszám bemenetére, a jumpPage pedig a ugró oldalszám bemenetét köti meg. Alapvető megvalósításA megfelelő kód a következő:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > előző oldal</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pages[0] > 2">...</strong>
<a v-for="page in pages" :class="{active: currentPage == page ? true : false}" @click="go(page)">{{page}}</a>
<strong v-show="pages[pages.length-1] < totalPage - 1">...</strong>
<a v-if="totalPage > 1" :class="{active: currentPage == totalPage ? true : false}" @click="go(totalPage)">{{totalPage}}</a>
<a v-show="currentPage < totalPage && showNext" @click="go(currentPage + 1)" > következő oldal</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> oldal, ugorj a</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>oldal</span>
<a @click="go(jumpPage)" > meghatározva</a>
</div>
</div>
</template>
<script>
export alapértelmezett {
Kellékek: {
totalPage: { // Oldalszám összesített száma
típus: Szám,
alapértelmezett: 1,
Szükséges: igaz
},
showItems: { // Megjelenített oldalak száma, pl.: 1 ... 34[5]67 ... 10
típus: Szám,
alapértelmezett: 5
},
showPrev: { // hogy a "Previous" jelen-e
típus: Boolean,
alapértelmezett: igaz
},
showNext: { // Hogy a "Next" jelen-e meg, hogy
típus: Boolean,
alapértelmezett: igaz
},
showJump: { // hogy a "Jump" megjelenítése
típus: Boolean,
alapértelmezett: igaz
},
initPage: {
típus: Szám,
alapértelmezés: 1
}
},
adatok () {
return {
currentPage: 0,
oldalak: [],
jumpPage: 0,
}
},
created() {// currentPage assignment inicializációkor
this.currentPage = this.initPage
}
Módszerek: {
Go (oldal) {
if(< 1. oldal) {
oldal = 1
}
if(page > this.totalPage) {
page = this.totalPage
}
if(page === this.currentPage) {
Visszatérés
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
oldal: this.currentPage
})
}
},
Nézzék: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
A következő lépés az, hogyan lehet elérni az oldalak tömbje értékét. Mivel az oldalak mindig erősen kapcsolódnak az aktuális oldalhoz és a beállításban megjeleníteni kívánt showItems elemekhez, teljesen lehetséges az oldalakat egy számított tulajdonságra váltani:
computed: {
oldalak () {
Az oldalszám-tömböt a kezdő és végi oldalszámok alapján kapjuk
let getPages = (start,end) => {
if(start <= 1 || start > end || start >= this.totalPage) {
start = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
end = this.totalPage - 1
}
legyen arr = []
for(let i = start; i <= vége; i++) {
arr.push(i)
}
Return arr
}
let counts = ez.showItems
if(this.totalPage < counts + 2) {
return getPages(2,this.totalPage)
} más {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2, számol)
} egyébként if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts, that.totalPage - 1)
} más {
let half = Math.ceil(counts/2) - 1
let end = ez.currentPage + fél
if(számol % 2 === 0) {
vége++
}
return getPages(this.currentPage - fél, vég)
}
}
}
}
Funkcionális bővítésEkkor gyakorlatilag egy átlagos oldalforgató komponens valósul meg (a stílus önmagában is testreszabható). Azonban sokszor (különösen néhány menedzsment háttérrel), kombinálva a vue-routerrel SPA létrehozásához, általában ilyen követelmények léteznek: Miután egy adott listán egy oldalra lapoztál, kattints egy elemre, hogy a szerkesztési oldalra menj, és szerkesztés után szeretnéd vissza tudni térni az oldalra, mielőtt ugrálnál.
Ez a követelmény nem túl kényelmes megvalósítani, ha csak a fent említett pager komponenst használod. Egyesek azt mondják, hogy a vuex-et kombinálni rendben van, de ebben az esetben az állapotban az oldalszámot kell rögzíteni az állapot ugrása előtt. Ha sok oldallatogató lista van, nyilvánvalóan nem elegáns több oldalt felvenni. Azonban a Vue-Router megvalósításának eleganciája miatt könnyű megfelelni a fenti követelményeknek:
Először adjuk hozzá a módkonfigurációt a props-on, mert ha a mód param, az ugrásnak tudnia kell, melyik útvonalon van, szóval:
mode: {
típus: Zsinór,
alapértelmezett: 'esemény' // 'esemény' | 'lekérdezés' | 'Param'
},
routeName: {
típus: String
}
Ezután változtatsz a tényleges ugrólogikai módszeren a go(page)-ban:
Go (oldal) {
if(< 1. oldal) {
oldal = 1
}
if(page > this.totalPage) {
page = this.totalPage
}
if(page === this.currentPage) {
Visszatérés
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
let query = this.$route.query
query.page = ez.currentOldal
this.$router.go({query: query})
} else, if(this.mode == 'params') {
let params = ez.$route.params
params.page = ez.currentOldal
this.$router.go({name: this.routeName,params: params})
} más {
this.$emit('go-page',{
oldal: this.currentPage
})
}
}
Ez lényegében egy egyszerű és univerzális oldalfordító komponenst tesz ki, amelyet nem lehet mindenki számára elküldeni a tárolóba.
A cikkben végre megjelent oldalfordító komponens, amely végre megjelent, és egy hullámnyi forráskódot láthatsz:
vue-simple-pager
|
Közzétéve 2019. 07. 25. 16:12:31
|
|
|
