|
Prima di tutto, l'ultima ondata di rendering: ![]()
Elementi di baseInnanzitutto, gli elementi comunemente posseduti dal componente pager (d'ora in poi chiamato "componente pager") sono: Le configurazioni richieste per l'inizializzazione sono: totalPagina initPage mostraPrev (se mostrare la pagina precedente) showNext (se mostrare la pagina successiva) mostraItems (poche pagine a metà) showJump (se mostrare il salto a quale pagina va)
Questi possono essere ricevuti tramite le scenografie di vue. Inoltre, il componente pager stesso deve avere una currentPage che registri la pagina corrente, l'array delle pagine viene utilizzato per ospitare il numero di pagina visualizzato al centro, e il jumpPage assegna l'input del numero di pagina jump. Realizzazione di baseIl codice corrispondente è:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > la pagina precedente</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<forte v-show="pagine[0] > 2">...</strong>
<a v-for="pagina in pagine" :class="{attivo: currentPage == pagina ? vero : falso}" @click="go(pagina)">{{pagina}}</a>
<forte v-show="pagine[paginas.lunghezza-1] < totalPagina - 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)" > pagina successiva</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Pagina totale <em class="jump-total">{{totalPage}}</em>, vai a</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>pagina</span>
<a @click="go(jumpPage)" > determinato</a>
</div>
</div>
</template>
<script>
Export default {
Oggetti di scena: {
totalPage: { // Numero totale di pagine
tipo: Numero,
predefinito: 1,
Richiesto: Vero
},
mostrareElementi: { // Numero di pagine visualizzate, ad esempio: 1 ... 34[5]67 ... 10
tipo: Numero,
Predefinita: 5
},
showPrev: { // se mostrare "Precedente"
tipo: Booleano,
Predefinito: Vero
},
mostraNext: { // Se mostrare "Next"
tipo: Booleano,
Predefinito: Vero
},
showJump: { // se mostrare "Jump"
tipo: Booleano,
Predefinito: Vero
},
initPage: {
tipo: Numero,
predefinito: 1
}
},
data () {
return {
Pagina attuale: 0,
pagine: [],
JumpPage: 0,
}
},
created() {// assignment currentPage all'inizializzazione
this.currentPage = this.initPage
}
Metodi: {
vai (pagina) {
se(pagina < 1) {
pagina = 1
}
se(pagina > this.totalPage) {
pagina = questo.totalPagina
}
if(page === this.currentPage) {
Ritorno
}
this.currentPage = parseInt(pagina,10)
this.$emit('go-page',{
pagina: this.currentPage
})
}
},
Guarda: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Il passo successivo è come ottenere il valore dell'array delle pagine. Poiché le pagine sono sempre fortemente correlate alla pagina corrente e agli showItems che devono essere visualizzati nella configurazione, è del tutto possibile cambiare le pagine con una proprietà calcolata:
computed: {
pagine () {
L'array dei numeri di pagina si ottiene in base ai numeri di pagina di inizio e fine
let getPages = (inizio,fine) => {
if(start <= 1 || start > end || start >= thistotalPage) {
start = 2
}
if(fine >= this.totalPage || fine < inizio || fine <= 1) {
end = this.totalPagina - 1
}
sia arr = []
per(sia i = inizio; i <= fine; i++) {
arr.push(i)
}
ritorno arr
}
lascia i conteggi = this.showItems
if(this.totalPage < conta + 2) {
ritorna getPages(2,questa.totalPage)
} altrimenti {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} altrimenti {
sia metà = Math.ceil(conteggi/2) - 1
sia fine = questo.currentPage + metà
se(conta % 2 === 0) {
end++
}
return getPages(this.currentPage - metà,fine)
}
}
}
}
Espansione funzionaleA questo punto, viene implementato un normale componente di pagina-gira (lo stile può essere personalizzato da solo). Tuttavia, molte volte (soprattutto in alcuni background manageriali), combinati con vue-router per creare una SPA, di solito ci sono tali requisiti: Dopo aver sfogliato una pagina in una certa lista, clicca su un elemento per andare alla pagina di modifica e, dopo aver modificato, vuoi poter tornare alla pagina prima di saltare.
Questo requisito non è molto comodo da implementare se usi solo il componente pager sopra. Alcuni potrebbero dire che va bene combinare vuex, ma in questo caso è necessario registrare il numero di pagina prima del salto nello stato. Se ci sono molte liste di sfogliamento di pagine, ovviamente non è elegante registrare più pagine. Tuttavia, grazie all'eleganza dell'implementazione di Vue-Router, è facile soddisfare i requisiti sopra riportati:
Per prima cosa, aggiungi la configurazione della modalità sui prop, perché quando la modalità è params, il salto deve sapere su quale percorso si trova, quindi:
mode: {
tipo: Stringa,
predefinito: 'evento' // 'evento' | 'interrogazione' | 'params'
},
routeName: {
tipo: Stringa
}
Poi apporta alcune modifiche al metodo reale della logica del salto go(pagina):
vai (pagina) {
se(pagina < 1) {
pagina = 1
}
se(pagina > this.totalPage) {
pagina = questo.totalPagina
}
if(page === this.currentPage) {
Ritorno
}
this.currentPage = parseInt(pagina,10)
if(this.mode == 'query') {
Let query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'params') {
Sia parametri = this.$route.params
params.page = questa.currentPage
this.$router.go({name: this.routeName,params: params})
} altrimenti {
this.$emit('go-page',{
pagina: this.currentPage
})
}
}
Questo completa sostanzialmente un componente semplice e universale che gira pagina, che non può essere inviato al repository affinché tutti possano utilizzarlo.
Il componente di page-turning finalmente implementato in questo articolo è stato rilasciato, e puoi vedere un'ondata di codice sorgente:
vue-simple-pager
| 
Pubblicato su 25/07/2019 16:12:31
|
|
|
