|
Najprej zadnji val upodobitev: ![]()
Osnovni elementiNajprej so elementi, ki jih komponenta pagerja običajno ima v lasti (v nadaljevanju »komponenta pagerja«): Konfiguracije, potrebne za inicializacijo, so: totalPage initPage showPrev (ali prikazati prejšnjo stran) Prikaži naslednje (ali prikaže naslednjo stran) showItems (nekaj strani na sredini) showJump (ali naj se pokaže skok na stran, na katero gre)
Te lahko prejmete preko Vuejevih rekvizitov. Poleg tega mora imeti komponenta pagerja currentPage, ki beleži trenutno stran, polje strani se uporablja za prilagoditev številke strani, prikazane na sredini, jumpPage pa veže vhod številke strani za skok. Osnovna realizacijaUstrezna koda je:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 & showPrev" @click="go(currentPage - 1)" > prejšnji strani</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] < skupajStran - 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)" > naslednja stran</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> strani, skoči na</span>
<vhodni tip="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>Page</span>
<a @click="go(jumpPage)" > določen</a>
</div>
</div>
</template>
<script>
export default {
Rekviziti: {
totalPage: { // Skupno število strani
tip: Številka,
privzeto: 1,
zahtevano: resnično
},
showItems: { // Število prikazanih strani, npr.: 1 ... 34[5]67 ... 10
tip: Številka,
privzeto: 5
},
showPrev: { // ali prikazati "Prejšnje"
tip: Boolean,
privzeto: resnično
},
showNext: { // Ali prikazati "Next"
tip: Boolean,
privzeto: resnično
},
showJump: { // ali prikazati "Jump"
tip: Boolean,
privzeto: resnično
},
initPage: {
tip: Številka,
privzeto: 1
}
},
podatki () {
return {
trenutnaStran: 0,
Strani: [],
jumpPage: 0,
}
},
created() {// dodelitev currentPage ob inicializaciji
this.currentPage = this.initPage
}
Metode: {
Pojdi (stran) {
if(page < 1) {
stran = 1
}
if(page > this.totalPage) {
stran = to.totalStran
}
if(page === this.currentPage) {
Vrnitev
}
this.currentPage = parseInt(page,10)
to.$emit('go-page',{
stran: this.currentPage
})
}
},
Oglejte si: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Naslednji korak je, kako pridobiti vrednost poljaja strani. Ker so strani vedno tesno povezane s trenutno stranjo in postavkami, ki jih je treba prikazati v konfiguraciji, je povsem mogoče strani spremeniti v izračunano lastnost:
computed: {
strani () {
Tabela številk strani se dobi na podlagi začetnih in končnih številk strani
naj getPages = (začetek,konec) => {
if(začetek <= 1 || začetek > konec || začetek >= this.totalPage) {
začetek = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
konec = to.totalStran - 1
}
naj bo arr = []
for(naj bo i = začetek; i <= konec; i++) {
arr.push(i)
}
return arr
}
naj šteje = to.showItems
if(this.totalPage < šteje + 2) {
vrni getPages(2,this.totalPage)
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} sicer if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} else {
naj bo polovica = Math.ceil(šteje/2) - 1
naj konča = this.currentPage + half
if(šteje % 2 === 0) {
end++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Funkcionalna razširitevNa tej točki je v bistvu implementirana običajna komponenta za obračanje strani (slog je mogoče prilagoditi samostojno). Vendar pa so pogosto (zlasti pri nekaterih upravljavskih izkušnjah), v kombinaciji z vue-routerjem za izdelavo SPA, običajno potrebne naslednje: Ko prelistate na stran v določenem seznamu, kliknite na postavko, da greste na stran za urejanje, in po urejanju se želite lahko vrniti na stran, preden skočite.
Ta zahteva ni zelo priročna za implementacijo, če uporabljate le zgornjo komponento pagerja. Nekateri bodo rekli, da je v redu združiti vuex, vendar je v tem primeru potrebno zabeležiti številko strani pred preskokom v državi. Če je veliko seznamov za obračanje strani, očitno ni elegantno beležiti več strani. Vendar pa je zaradi elegance implementacije Vue-Router enostavno izpolniti zgornje zahteve:
Najprej dodajte konfiguracijo načina na propele, ker ko je način parametr, mora skok vedeti, na kateri poti je, torej:
mode: {
tip: Struna,
privzeto: 'dogodek' // 'dogodek' | 'poizvedba' | 'params'
},
routeName: {
tip: Struna
}
Nato naredite nekaj sprememb v dejanski metodi logike skakanja go(page):
Pojdi (stran) {
if(page < 1) {
stran = 1
}
if(page > this.totalPage) {
stran = to.totalStran
}
if(page === this.currentPage) {
Vrnitev
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
naj poizvedba = to.$route.poizvedba
query.page = this.currentPage
this.$router.go({query: query})
} sicer če(this.mode == 'parametri') {
naj bo parametri = to.$route.parametri
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} else {
to.$emit('go-page',{
stran: this.currentPage
})
}
}
To v bistvu zaključi preprosto in univerzalno komponento, ki jo ni mogoče poslati v repozitorij za uporabo vsem.
Komponenta obračanja strani, ki je končno implementirana v tem članku, je bila izdana in lahko vidite val izvorne kode:
vue-simple-pager
|
Objavljeno na 25. 07. 2019 16:12:31
|
|
|
