|
Najprv posledná vlna renderovaní: ![]()
Základné prvkyV prvom rade, prvky, ktoré bežne vlastní komponent pagera (ďalej len "komponent pagera"), sú: Konfigurácie potrebné na inicializáciu sú: totalPage initPage showPrev (či zobraziť predchádzajúcu stránku) zobraziť ďalšie (či zobraziť nasledujúcu stránku) showItems (niekoľko strán uprostred) showJump (či zobraziť skok na stránku, na ktorú smeruje)
Tieto je možné prijímať cez rekvizity Vue. Okrem toho samotná komponenta pageru musí mať currentPage, ktorá zaznamenáva aktuálnu stránku, pole stránok sa používa na prispôsobenie číslu stránky zobrazenému v strede a jumpPage priradí vstup čísla stránky skoku. Základná realizáciaPríslušný kód je:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 & showPrev" @click="go(currentPage - 1)" > predchádzajúcej stránke</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)" > ďalšia stránka</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> stránka, preskočiť na</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>Stránka</span>
<a @click="go(jumpPage)" > určený</a>
</div>
</div>
</template>
<script>
export default {
Rekvizity: {
totalPage: { // Celkový počet strán
typ: Číslo,
predvolené: 1,
požadované: pravda
},
showItems: { // Počet zobrazených strán, napr.: 1 ... 34[5]67 ... 10
typ: Číslo,
Predvolené: 5
},
showPrev: { // či zobraziť "Predchádzajúce"
typ: Boolean,
predvolené: pravda
},
showNext: { // Či zobraziť "Next"
typ: Boolean,
predvolené: pravda
},
showJump: { // či zobraziť "Jump"
typ: Boolean,
predvolené: pravda
},
initPage: {
typ: Číslo,
Predvolené: 1
}
},
dáta () {
return {
aktuálnaStrana: 0,
stránky: [],
jumpPage: 0,
}
},
created() {// priradenie currentPage pri inicializácii
this.currentPage = this.initPage
}
Metódy: {
choď (stránka) {
if(page < 1) {
strana = 1
}
if(page > this.totalPage) {
stránka = this.totalPage
}
if(page === this.currentPage) {
návrat
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
stránka: this.currentPage
})
}
},
Sledujte: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Ďalším krokom je, ako získať hodnotu poľa stránok. Keďže stránky sú vždy úzko prepojené s aktuálnou stránkou a showItems, ktoré je potrebné zobraziť v konfigurácii, je úplne možné zmeniť stránky na vypočítanú vlastnosť:
computed: {
stránky () {
Pole čísel strán sa získava na základe počiatočných a koncových čísel strán
nech getPages = (začiatok,koniec) => {
if(začať <= 1 || začať > koniec || začať >= this.totalPage) {
začiatok = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
koniec = this.totalPage - 1
}
nech arr = []
pre(nech i = začiatok; i <= koniec; i++) {
arr.push(i)
}
return arr
}
nech counts = this.showItems
if(this.totalPage < počíta + 2) {
return getPages(2,this.totalPage)
} inak {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} inak ak(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} inak {
nech polovica = Math.ceil(counts/2) - 1
nech koniec = this.currentPage + half
if(počíta % 2 === 0) {
end++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Funkčná expanziaV tomto bode je v podstate implementovaný bežný komponent na listovanie stránok (štýl je možné prispôsobiť sám). Avšak často (najmä s manažérskymi skúsenosťami), v kombinácii s vue-routerom na vytvorenie SPA, sú zvyčajne takéto požiadavky: Po prelistovaní na stránku v určitom zozname kliknite na položku, aby ste prešli na stránku s úpravami, a po úprave by ste sa mali vedieť vrátiť na stránku pred skokom.
Táto požiadavka nie je veľmi pohodlná na implementáciu, ak používate len vyššie uvedený komponent pagera. Niektorí ľudia môžu povedať, že je v poriadku kombinovať Vuex, ale v tomto prípade je potrebné zaznamenať číslo stránky pred skokom v stave. Ak je zoznamov na prelistovanie veľa stránok, samozrejme nie je elegantné zaznamenávať viacero strán. Vďaka elegancii implementácie Vue-Router je však jednoduché splniť vyššie uvedené požiadavky:
Najprv pridajte konfiguráciu módu na rekvizity, pretože keď je režim parametre, skok musí vedieť, na ktorej trase je, takže:
mode: {
typ: Struna,
predvolené: 'event' // 'event' | 'query' | 'params'
},
routeName: {
typ: Struna
}
Potom urobte niekoľko zmien v skutočnej metóde skokovej logiky go(page):
choď (stránka) {
if(page < 1) {
strana = 1
}
if(page > this.totalPage) {
stránka = this.totalPage
}
if(page === this.currentPage) {
návrat
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
nech query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} inak if(this.mode == 'params') {
nech params = this.$route.params
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} inak {
this.$emit('go-page',{
stránka: this.currentPage
})
}
}
Týmto sa v podstate uzatvára jednoduchá a univerzálna stránka na listovanie, ktorú nie je možné posielať do repozitára na použitie každému.
Komponent na otáčanie stránok, ktorý je konečne implementovaný v tomto článku, bol zverejnený a môžete vidieť vlnu zdrojového kódu:
vue-simple-pager
|
Zverejnené 25. 7. 2019 16:12:31
|
|
|
