|
Ensinnäkin, viimeinen renderöintiaalto: ![]()
PeruselementitEnsinnäkin hakulaitteen (jäljempänä "hakukonekomponentti") yleisesti omistamat elementit ovat: Alustukseen vaaditut asetukset ovat: totalPage initPage showPrev (näyttääkö edellinen sivu) showNext (näyttääkö seuraava sivu) showItems (muutama sivu keskellä) showJump (näyttääkö hyppy sille sivulle, jolle se menee)
Näitä voi vastaanottaa Vue:n rekvisiittojen kautta. Lisäksi hakukonekomponentilla itsessään täytyy olla currentPage, joka tallentaa nykyisen sivun, sivutaulukkoa käytetään keskellä näkyvään sivunumeroon, ja jumpPage sitoo hyppysivunumeron syötteen. PerusoivallusVastaava koodi on:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > edellisen sivun</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pages[0] > 2">...</strong>
<a v-for="sivu sivuilla" :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)" > seuraava sivu</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> sivu, siirry sivulle</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>sivu</span>
<a @click="go(jumpPage)" ></a> määritetty
</div>
</div>
</template>
<script>
Viennin oletusarvo {
Rekvisiitta: {
totalPage: { // Sivujen kokonaismäärä
tyyppi: Numero,
oletus: 1,
vaaditaan: tosi
},
showItems: { // Näytettyjen sivujen määrä, esim. 1 ... 34[5]67 ... 10
tyyppi: Numero,
oletus: 5
},
showPrev: { // näyttääkö "Edellinen"
tyyppi: Boolean,
oletus: tosi
},
showNext: { // Näyttääkö "Next"
tyyppi: Boolean,
oletus: tosi
},
showJump: { // näyttääkö "Jump"
tyyppi: Boolean,
oletus: tosi
},
initPage: {
tyyppi: Numero,
oletus: 1
}
},
data () {
return {
currentPage: 0,
sivut: [],
jumpPage: 0,
}
},
created() {// currentPage-määritys alustuksen yhteydessä
this.currentPage = this.initPage
}
Menetelmät: {
go (sivu) {
if(sivu < 1) {
sivu = 1
}
if(sivu > this.totalPage) {
sivu = this.totalPage
}
if(page === this.currentPage) {
Paluu
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
sivu: this.currentPage
})
}
},
Katso: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Seuraava vaihe on, miten saat sivutaulukon arvon. Koska sivut liittyvät aina vahvasti nykyiseen sivuun ja showItems-kohteisiin, jotka täytyy näyttää konfiguraatiossa, on täysin mahdollista muuttaa sivuja laskettuun ominaisuuteen:
computed: {
sivut () {
Sivunumerotaulukko saadaan alku- ja loppusivujen numeroiden perusteella
let getPages = (alku, loppu) => {
if(start <= 1 || start > end || start >= this.totalPage) {
start = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
loppu = tämä.totalSivu - 1
}
olkoon arr = []
for(let i = start; i <= loppu; i++) {
arr.push(i)
}
return arr
}
let counts = this.showItems
if(this.totalPage < lasketaan + 2) {
return getPages(2,this.totalPage)
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} muuten if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts, this.totalPage - 1)
} else {
olkoon puoli = Math.ceil(counts/2) - 1
let end = this.currentPage + half
if(laskee % 2 === 0) {
loppu++
}
return getPages(this.currentPage - puoli, loppu)
}
}
}
}
Funktionaalinen laajennusTässä vaiheessa tavallinen sivun kääntämisen komponentti on käytännössä toteutettu (tyyliä voidaan muokata itsenäisesti). Kuitenkin usein (erityisesti joidenkin hallintataustojen) yhdistettynä vue-reitittimeen SPA:n tekemiseen, on yleensä tällaisia vaatimuksia: Kun olet kääntänyt tietyn listan sivulle, klikkaa kohdetta päästäksesi muokkaussivulle, ja muokkauksen jälkeen haluat pystyä palaamaan sivulle ennen hyppyä.
Tämän vaatimuksen toteuttaminen ei ole kovin kätevää, jos käytät vain yllä mainittua hakulaitekomponenttia. Jotkut saattavat sanoa, että Vuexin yhdistäminen on ok, mutta tässä tapauksessa sivunumero on kirjattava ennen hyppyä osavaltioon. Jos sivujen kääntölistoja on paljon, ei tietenkään ole eleganttia tallentaa useita sivuja. Kuitenkin Vue-Routerin toteutuksen eleganssin ansiosta yllä olevat vaatimukset on helppo täyttää:
Lisää ensin rekvisiittareiden tilan konfiguraatio, koska kun tila on paramit, hypyn täytyy tietää, millä reitillä se on, joten:
mode: {
type: String,
oletus: 'tapahtuma' // 'tapahtuma' | 'kysely' | 'Params'
},
routeName: {
tyyppi: String
}
Sitten tee muutoksia varsinaiseen hyppylogiikkamenetelmään go(page):
go (sivu) {
if(sivu < 1) {
sivu = 1
}
if(sivu > this.totalPage) {
sivu = this.totalPage
}
if(page === this.currentPage) {
Paluu
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
let query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'params') {
olkoon params = tämä.$route.paramit
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} else {
this.$emit('go-page',{
sivu: this.currentPage
})
}
}
Tämä käytännössä täydentää yksinkertaisen ja universaalin sivunkääntäjäkomponentin, jota ei voi lähettää repositorioon kaikkien käytettäväksi.
Tässä artikkelissa vihdoin toteutettu sivunkääntäjäkomponentti on julkaistu, ja näet lähdekoodin aallon:
Vue-simple-pager
| 
Julkaistu 25.7.2019 16.12.31
|
|
|
