|
Nejprve poslední vlna vizualizací: ![]()
Základní prvkyZa prvé, prvky, které běžně vlastní komponenta stránkovače (dále jen "komponenta stránkovače"), jsou: Konfigurace potřebné pro inicializaci jsou: totalPage initPage showPrev (zda zobrazit předchozí stránku) zobrazit Další stránku (zda zobrazit další stránku) showItems (několik stránek uprostřed) showJump (zda zobrazit skok na stránku, na kterou to vede)
Tyto informace lze přijímat přes rekvizity Vue. Kromě toho musí mít samotná komponenta stránkovače currentPage, která zaznamenává aktuální stránku, pole stránek slouží k přizpůsobení číslu stránky zobrazenému uprostřed a jumpPage připojuje vstup čísla stránky skoku. Základní realizaceOdpovídající 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)" > předchozí stránce</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] < celkemPage - 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)" > další stránku</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> stránky, přejít na</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>Stránka</span>
<a @click="go(jumpPage)" > určeno</a>
</div>
</div>
</template>
<script>
exportovat výchozí {
Rekvizity: {
totalPage: { // Celkový počet stran
typ: Číslo,
výchozí: 1,
povinné: pravda
},
showItems: { // Počet zobrazených stránek, např.: 1 ... 34[5]67 ... 10
typ: Číslo,
výchozí: 5
},
showPrev: { // zda zobrazit "Previous"
typ: Boolean,
výchozí: pravda
},
showNext: { // Zda zobrazit "Next"
typ: Boolean,
výchozí: pravda
},
showJump: { // zda zobrazit "Jump"
typ: Boolean,
výchozí: pravda
},
initPage: {
typ: Číslo,
výchozí: 1
}
},
Data () {
return {
currentPage: 0,
stránky: [],
jumpPage: 0,
}
},
created() {// přiřazení currentPage při inicializaci
this.currentPage = this.initPage
}
Metody: {
Go (stránka) {
if(page < 1) {
strana = 1
}
if(page > this.totalPage) {
stránka = toto.celkovéStránka
}
if(page === this.currentPage) {
návrat
}
this.currentPage = parseInt(page,10)
tohle.$emit('go-page',{
stránka: this.currentPage
})
}
},
Sledujte: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Dalším krokem je, jak získat hodnotu pole stránek. Protože stránky jsou vždy úzce propojeny s aktuální stránkou a showItems, které je třeba zobrazit v konfiguraci, je zcela možné stránky změnit na vypočítanou vlastnost:
computed: {
stránky () {
Pole čísel stránek se získává na základě čísel na začátku a konci stránky
nechť getPages = (začátek,konec) => {
if(start <= 1 || start > end || start >= this.totalPage) {
začátek = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
konec = this.totalPage - 1
}
nechť arr = []
pro (nechť i = začíná; i <= konec; i++) {
arr.push(i)
}
návrat arr
}
nech counts = this.showItems
if(this.totalPage < počítá + 2) {
return getPages(2,this.totalPage)
} jinak {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} jinak if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} jinak {
nechť polovina = Math.ceil(počítá/2) - 1
nech end = this.currentPage + half
if(počítá % 2 === 0) {
end++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Funkční rozšířeníV tomto bodě je v podstatě implementována běžná komponenta pro otáčení stránek (styl lze přizpůsobit samostatně). Nicméně často (zejména s některými manažerskými zkušenostmi), v kombinaci s vue-routerem pro vytvoření SPA, obvykle existují takové požadavky: Po otočení na stránku v určitém seznamu klikněte na položku, abyste přešli na stránku úprav, a po úpravě byste se měli moci vrátit na stránku před skokem.
Tento požadavek není příliš snadné implementovat, pokud používáte pouze výše uvedenou komponentu stránkovače. Někteří lidé mohou říct, že je v pořádku Vuex kombinovat, ale v tomto případě je nutné zaznamenat číslo stránky před přechodem do stavu. Pokud je mnoho seznamů pro listování stránek, není zjevně elegantní zaznamenávat více stránek. Díky eleganci implementace Vue-Router je však snadné splnit výše uvedené požadavky:
Nejprve přidejte konfiguraci módu na propity, protože když je režim parametr, skok musí vědět, na jaké trase je, takže:
mode: {
typ: Struna,
výchozí: 'event' // 'event' | 'dotaz' | 'params'
},
routeName: {
typ: Struna
}
Pak provedete nějaké změny v samotné metodě logiky skoků go(page):
Go (stránka) {
if(page < 1) {
strana = 1
}
if(page > this.totalPage) {
stránka = toto.celkovéStránka
}
if(page === this.currentPage) {
návrat
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
nechť dotaz = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} jinak if(this.mode == 'params') {
nechť parametry = this.$route.params
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} jinak {
tohle.$emit('go-page',{
stránka: this.currentPage
})
}
}
Tím se v podstatě dokončuje jednoduchá a univerzální složka pro otáčení stránek, kterou nelze poslat do repozitáře k použití všem.
Komponenta pro otáčení stránek, která byla konečně implementována v tomto článku, byla zveřejněna a můžete vidět vlnu zdrojového kódu:
vue-simple-pager
|
Zveřejněno 25.07.2019 16:12:31
|
|
|
