|
Allereerst de laatste golf van renderings: ![]()
BasiselementenAllereerst zijn de elementen die algemeen eigendom zijn van het piepercomponent (hierna aangeduid als de "pagercomponent") de volgende elementen: De configuraties die vereist zijn voor initialisatie zijn: totalPage initPage showVorige (of de vorige pagina getoond moet worden) showNext (of de volgende pagina getoond moet worden) showItems (een paar pagina's in het midden) showJump (of de sprong naar welke pagina het gaat tonen)
Deze kunnen worden ontvangen via de rekwisieten van vue. Daarnaast moet het pageercomponent zelf een actuele pagina hebben die de huidige pagina registreert, de pagina-array wordt gebruikt om het paginanummer in het midden te accommoderen, en de jumpPage bindt de invoer van springpaginanummer. BasisrealisatieDe bijbehorende code is:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > de vorige pagina</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pagina's[0] > 2">...</strong>
<a v-for="pagina in pagina's" :class="{actief: currentPage == pagina ? waar : onwaar}" @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)" > volgende pagina</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Totaal < klasse="jump-total">{{totalPage}}</em> pagina, spring naar</span>
<invoertype="nummer" min="1" :max="totalPage" v-model="jumpPage" klasse="jump-input">
<span>pagina</span>
<a @click="go(jumpPage)" > bepaald</a>
</div>
</div>
</template>
<script>
export default {
Props: {
totalPage: { // Totaal aantal pagina's
type: Nummer,
standaard: 1,
Vereist: waar
},
showItems: { // Aantal getoonde pagina's, bijvoorbeeld: 1 ... 34[5]67 ... 10
type: Nummer,
standaard: 5
},
showVorige tijd: { // of "Vorige" getoond moet worden.
type: Booleaans,
standaard: waar
},
showNext: { // Of te tonen "Next"
type: Booleaans,
standaard: waar
},
showJump: { // of "Jump" moet worden getoond.
type: Booleaans,
standaard: waar
},
initPage: {
type: Nummer,
standaard: 1
}
},
data () {
return {
currentPage: 0,
pagina's: [],
jumpPage: 0,
}
},
created() {// currentPage toewijzing bij initialisatie
this.currentPage = this.initPage
}
Methoden: {
Go (pagina) {
if(pagina < 1) {
pagina = 1
}
if(pagina > this.totalPage) {
pagina = dit.totalPagina
}
if(pagina === dit.huidigePagina) {
Terugkeer
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
pagina: dit.huidigePagina
})
}
},
kijk: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
De volgende stap is hoe je de waarde van de pagina-array bepaalt. Omdat pagina's altijd sterk gerelateerd zijn aan de huidige pagina en de showItems die in de configuratie getoond moeten worden, is het volledig mogelijk om pagina's te wijzigen naar een berekende eigenschap:
computed: {
pagina's () {
De paginanummer-array wordt verkregen op basis van de begin- en eindpaginanummers
let getPages = (start,end) => {
if(start <= 1 || begin > einde || start >= dit.totalPagina) {
start = 2
}
if(end >= this.totalPage || einde < start || einde <= 1) {
einde = dit.totalPagina - 1
}
Laat arr = []
for(laat i = begin; I <= einde; i++) {
arr.push(i)
}
Terug ARR
}
let counts = dit.showItems
if(this.totalPage < telt + 2) {
retour getPages(2,this.totalPage)
} anders {
als(this.currentPage <= Math.ceil(counts/2)) {
retour getPages(2,counts)
} anders als(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(dit.totalPagina + 1 - counts,this.totalPage - 1)
} anders {
laat half = Math.ceil(counts/2) - 1
let end = dit.currentPage + half
als(telt % 2 === 0) {
einde++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Functionele expansieOp dit punt wordt in feite een gewone pagina-omkeercomponent geïmplementeerd (de stijl kan zelf worden aangepast). Echter, vaak (vooral met enkele managementachtergronden), gecombineerd met vue-router om een SPA te maken, zijn er meestal de volgende vereisten: Na het omslaan van een pagina in een bepaalde lijst klik je op een item om naar de bewerkingspagina te gaan, en na het bewerken wil je terug kunnen keren naar de pagina voordat je springt.
Deze eis is niet erg handig te implementeren als je alleen de piepercomponent hierboven gebruikt. Sommige mensen zeggen misschien dat het oké is om vuex te combineren, maar in dit geval is het noodzakelijk om het paginanummer te registreren voordat de overstap in de staat begint. Als er veel pagina-omslaanlijsten zijn, is het uiteraard niet elegant om meerdere pagina's te registreren. Door de elegantie van de Vue-Router-implementatie is het echter eenvoudig om aan bovenstaande eisen te voldoen:
Voeg eerst de modusconfiguratie toe op de props, want wanneer de modus parameters is, moet de sprong weten op welke route hij zich bevindt, dus:
mode: {
type: Snaar,
standaard: 'gebeurtenis' // 'gebeurtenis' | 'query' | 'params'
},
routeName: {
type: String
}
Daarna maak je wat wijzigingen in de eigenlijke jumping logic method(pagina):
Go (pagina) {
if(pagina < 1) {
pagina = 1
}
if(pagina > this.totalPage) {
pagina = dit.totalPagina
}
if(pagina === dit.huidigePagina) {
Terugkeer
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
let query = this.$route.query
query.page = dit.huidigePagina
this.$router.go({query: query})
} anders als(this.mode == 'params') {
laat params = dit.$route.params
params.page = dit.huidigePagina
this.$router.go({name: this.routeName,params: params})
} anders {
this.$emit('go-page',{
pagina: dit.huidigePagina
})
}
}
Dit voltooit in feite een eenvoudige en universele pageturning-component, die niet naar de repository kan worden gestuurd zodat iedereen die kan gebruiken.
De pagina omslaan-component die uiteindelijk in dit artikel is geïmplementeerd, is uitgebracht, en je ziet een golf van broncode:
vue-simple-pager
| 
Geplaatst op 25-07-2019 16:12:31
|
|
|
