|
Først og fremst, den siste bølgen av renderinger: ![]()
Grunnleggende elementerFørst og fremst er elementene som vanligvis eies av personsøkerkomponenten (heretter kalt «personsøkerkomponenten»): Tidligere Side 1 Sidetallet vist i midten Siste side Neste
Konfigurasjonene som kreves for initialisering er: totalPage initPage showPrev (om forrige side skal vises) showNext (om neste side skal vises) showItems (noen sider i midten) showJump (om man skal vise hoppet til hvilken side det går til)
Disse kan mottas via Vues rekvisitter. I tillegg må pager-komponenten selv ha en currentPage som registrerer den nåværende siden, sidearrayet brukes for å tilpasse sidetallet som vises i midten, og jumpPage binder inndata for hoppsidenummer. Grunnleggende realiseringDen tilsvarende koden er:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 & showPrev" @click="go(currentPage - 1)" > forrige side</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<sterk v-show="sider[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)" > neste side</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total < klasse="jump-total">{{totalPage}}</em> side, hopp til</span>
<inputtype="number" min="1" :max="totalPage" v-model="jumpPage" klasse="jump-input">
<span>Side</span>
<a @click="go(jumpPage)" > bestemt</a>
</div>
</div>
</template>
<script>
eksportstandard {
Rekvisitter: {
totalSide: { // Totalt antall sider
type: Nummer,
standard: 1,
Påkrevd: Sant
},
showItems: { // Antall sider som vises, f.eks.: 1 ... 34[5]67 ... 10
type: Nummer,
standard: 5
},
showPrev: { // om man skal vise "Previous"
type: Boolesk,
Standard: Sant
},
showNext: { // Om man skal vise "Next"
type: Boolesk,
Standard: Sant
},
showJump: { // om man skal vise "Jump"
type: Boolesk,
Standard: Sant
},
initPage: {
type: Nummer,
Standard: 1
}
},
data () {
returner {
currentPage: 0,
sider: [],
hoppSide: 0,
}
},
created() {// currentPage-tilordning ved initialisering
this.currentPage = this.initPage = this.initPage
}
metoder: {
Go (side) {
if(side < 1) {
side = 1
}
if(page > this.totalPage) {
side = this.totalPage
}
if(page === this.currentPage) {
Tilbake
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
side: this.currentPage
})
}
},
se: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Neste steg er hvordan man får verdien av sidearrayet. Siden sidene alltid er sterkt knyttet til den nåværende siden og showItems som må vises i konfigurasjonen, er det fullt mulig å endre sider til en beregnet egenskap:
computed: {
sider () {
Sidetallsarrayet oppnås basert på start- og sluttsidetallene
let getPages = (start,end) => {
hvis(start <= 1 || start > slutt || start >= denne.totalSide) {
start = 2
}
hvis(slutt >= denne.totalSide || slutt < start || slutt <= 1) {
slutt = dette.totalSide - 1
}
La arr = []
for(la i = start; I <= slutt; i++) {
arr.push(i)
}
Return ARR
}
let counts = this.showItems
hvis (this.totalPage < counts + 2) {
returner getPages(2,denne.totalSide)
} ellers {
if(this.currentPage <= Math.ceil(counts/2)) {
returner getPages(2,teller)
} ellers hvis(denne.currentPage >= this.totalPage - Math.floor(counts/2)) {
returner getPages(this.totalSide + 1 - counts,this.totalPage - 1)
} ellers {
la halve = Math.ceil(counts/2) - 1
let end = this.currentPage + half
hvis(teller % 2 === 0) {
slutt++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Funksjonell ekspansjonPå dette tidspunktet er en vanlig sidevendingskomponent i praksis implementert (stilen kan tilpasses for seg selv). Men mange ganger (spesielt med noen ledelsesbakgrunner), kombinert med vue-router for å lage en SPA, er det vanligvis slike krav: Etter å ha bladd til en side i en bestemt liste, klikk på et element for å gå til redigeringssiden, og etter redigering vil du kunne gå tilbake til siden før du hopper.
Dette kravet er ikke særlig praktisk å implementere hvis du kun bruker pager-komponenten ovenfor. Noen vil kanskje si at det er greit å kombinere vuex, men i dette tilfellet er det nødvendig å registrere sidetallet før hoppet i tilstanden. Hvis det finnes mange sideflip-lister, er det åpenbart ikke elegant å ta opp flere sider. Men på grunn av elegansen til Vue-Router-implementeringen er det lett å oppfylle de ovennevnte kravene:
Først, legg til moduskonfigurasjonen på propsene, fordi når modusen er parametere, må hoppet vite hvilken rute det er på, altså:
mode: {
type: Streng,
standard: 'hendelse' // 'hendelse' | 'forespørsel' | 'params'
},
routeName: {
type: Streng
}
Gjør deretter noen endringer i selve hopplogikkmetoden (side):
Go (side) {
if(side < 1) {
side = 1
}
if(page > this.totalPage) {
side = this.totalPage
}
if(page === this.currentPage) {
Tilbake
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
let query = this.$route.query
query.page = denne.currentPage
this.$router.go({query: query})
} ellers hvis(this.mode == 'parametrer') {
la params = denne.$route.params
params.page = denne.currentPage
this.$router.go({name: this.routeName,params: params})
} ellers {
this.$emit('go-page',{
side: this.currentPage
})
}
}
Dette fullfører i bunn og grunn en enkel og universell sidevendingskomponent, som ikke kan sendes til repositoriet for at alle skal bruke den.
Sidevendingskomponenten som endelig er implementert i denne artikkelen er utgitt, og du kan se en bølge av kildekode:
Vue-Simple-Pager
| 
Publisert på 25.07.2019 16:12:31
|
|
|
