|
Zunächst einmal die letzte Welle von Renderings: ![]()
GrundelementeZunächst sind die Elemente, die der Pager-Komponente (im Folgenden als "Pager-Komponente" bezeichnet) gemeinsam gehören: Die für die Initialisierung erforderlichen Konfigurationen sind: totalPage initPage showPrev (ob die vorherige Seite gezeigt werden soll) showNext (ob die nächste Seite gezeigt werden soll) showItems (ein paar Seiten in der Mitte) showJump (ob der Sprung zu der Seite angezeigt werden soll)
Diese können über Vue-Requisiten empfangen werden. Zusätzlich muss die Pager-Komponente selbst eine aktuelle Seite haben, die die aktuelle Seite aufzeichnet, das Seitenarray wird verwendet, um die in der Mitte angezeigte Seitenzahl aufzunehmen, und die JumpPage bindet die Sprungseitennummer-Eingabe. Grundlegende RealisierungDer entsprechende Code lautet:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 & showPrev" @click="go(currentPage - 1)" > die vorherige Seite</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<starke V-Show="Seiten[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)" > nächste Seite</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> Seite, springen Sie zur</span>
<Eingabetyp="number" min="1" :max="totalPage" v-model="jumpPage" Klasse="jump-input">
<span>Seite</span>
<a @click="go(jumpPage)" > bestimmt</a>
</div>
</div>
</template>
<script>
Export Standard {
Requisiten: {
totalPage: { // Gesamtanzahl der Seiten
Typ: Nummer,
Standard: 1,
Erforderlich: Wahr
},
showItems: { // Anzahl der angezeigten Seiten, z.B.: 1 ... 34[5]67 ... 10
Typ: Nummer,
Standard: 5
},
showPrev: { // ob man "Previous" zeigen soll.
Typ: Boolesch,
Standard: wahr
},
showNext: { // Ob man "Next" zeigen soll
Typ: Boolesch,
Standard: wahr
},
showJump: { // ob man "Jump" zeigen soll.
Typ: Boolesch,
Standard: wahr
},
initPage: {
Typ: Nummer,
Standard: 1
}
},
data () {
Rückkehr {
currentPage: 0,
Seiten: [],
jumpPage: 0,
}
},
created() {// currentPage-Zuweisung bei der Initialisierung
this.currentPage = this.initPage
}
Methoden: {
go (Seite) {
if(Seite < 1) {
Seite = 1
}
if(Seite > this.totalPage) {
Seite = this.totalPage
}
if(page === this.currentPage) {
Rückgabe
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
Seite: das.heutePage
})
}
},
ansehen: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Der nächste Schritt ist, wie man den Wert des Seitenarrays bekommt. Da Seiten immer eng mit der aktuellen Seite und den showItems, die in der Konfiguration angezeigt werden müssen, verbunden sind, ist es durchaus möglich, Seiten auf eine berechnete Eigenschaft umzuwandeln:
computed: {
Seiten () {
Das Seitenzahlen-Array wird basierend auf den Start- und Endseitenzahlen ermittelt
let getPages = (start,end) => {
if(start <= 1 || start > end || start >= this.totalPage) {
Start = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
Ende = dies.totalSeite - 1
}
Lass arr = []
for(let i = start; I <= Ende; i++) {
arr.push(i)
}
Rückkehr ARR
}
let counts = this.showItems
if(this.totalPage < zählt + 2) {
zurück getPages(2,this.totalPage)
} sonst {
if(this.currentPage <= Math.ceil(counts/2)) {
Zurück getPages(2,Counts)
} sonst wenn(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} sonst {
lass die Hälfte = Math.ceil(counts/2) - 1
let end = this.currentPage + half
wenn(zählt % 2 === 0) {
Ende++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Funktionale EntwicklungAn diesem Punkt ist im Grunde eine gewöhnliche Page-Turning-Komponente implementiert (der Stil kann eigenständig angepasst werden). Allerdings gibt es oft (insbesondere einige Management-Erfahrungen) in Kombination mit vue-router zur Erstellung eines SPA meist folgende Anforderungen: Nachdem du zu einer Seite in einer bestimmten Liste geblättert hast, klickst du auf einen Eintrag, um zur Bearbeitungsseite zu gelangen, und nach dem Bearbeiten möchtest du vor dem Sprung zur Seite zurückkehren können.
Diese Anforderung ist nicht sehr praktisch umzusetzen, wenn man nur die oben genannte Pager-Komponente verwendet. Manche sagen vielleicht, dass es in Ordnung ist, Vuex zu kombinieren, aber in diesem Fall ist es notwendig, die Seitenzahl vor dem Sprung im Bundesstaat zu notieren. Wenn es viele Seitenumblätterlisten gibt, ist es natürlich nicht elegant, mehrere Seiten aufzunehmen. Aufgrund der Eleganz der Vue-Router-Implementierung ist es jedoch einfach, die oben genannten Anforderungen zu erfüllen:
Füge zuerst die Moduskonfiguration auf den Props hinzu, denn wenn der Modus Params ist, muss der Sprung wissen, auf welcher Route er sich befindet, also:
mode: {
Typ: String,
Standard: 'Ereignis' // 'Ereignis' | 'Anfrage' | 'params'
},
routeName: {
Typ: String
}
Dann nehmen Sie einige Änderungen an der eigentlichen Sprunglogik-Methode vor:
go (Seite) {
if(Seite < 1) {
Seite = 1
}
if(Seite > this.totalPage) {
Seite = this.totalPage
}
if(page === this.currentPage) {
Rückgabe
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
let query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} sonst wenn(this.mode == 'params') {
let params = this.$route.params
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} sonst {
this.$emit('go-page',{
Seite: das.heutePage
})
}
}
Dies vervollständigt im Grunde eine einfache und universelle Page-Turning-Komponente, die nicht an das Repository gesendet werden kann, damit alle sie nutzen können.
Die in diesem Artikel endgültig implementierte Page-Turning-Komponente wurde veröffentlicht, und man sieht eine Welle von Quellcode:
vue-simple-pager
| 
Veröffentlicht am 25.07.2019 16:12:31
|
|
|
