Vue teknisk klistermærke

Zhaoxiaojiey · Opslået på 25/07/2019 16.12.31

Først og fremmest, den sidste bølge af renderings:

Grundlæggende elementer

Først og fremmest er de elementer, der almindeligvis ejes af pager-komponenten (herefter kaldet "pager-komponenten"), følgende:

Tidligere
Side 1
Sidetallet vist i midten
Sidste side
Næste

De konfigurationer, der kræves for initialisering, er:

totalPage
initPage
showPrev (om den forrige side skal vises)
showNext (om næste side skal vises)
showItems (et par sider i midten)
showJump (om springet skal vises til, hvilken side det går til)

Disse kan modtages via vue's rekvisitter.

Derudover skal pager-komponenten selv have en aktuel side, der registrerer den aktuelle side, sidearrayet bruges til at rumme sidetallet i midten, og jumpPage binder jump page number-inputtet.

Grundlæggende realisering

Den tilsvarende kode 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>
<strong 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)" > næste side</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" klasse="pager-jump">
<span>Total < klasse="hop-total">{{totalPage}}</em> side, spring 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: { // Samlet antal sider
type: Nummer,
standard: 1,
Påkrævet: True
},
showItems: { // Antal viste sider, f.eks.: 1 ... 34[5]67 ... 10
type: Nummer,
standard: 5
},
showPrev: { // om man skal vise "Previous"
type: boolesk,
Standard: sandt
},
showNext: { // Om man skal vise "Next"
type: boolesk,
Standard: sandt
},
showJump: { // om man skal vise "Jump"
type: boolesk,
Standard: sandt
},
initPage: {
type: Nummer,
Standard: 1
}
},
data () {
return {
currentPage: 0,
Sider: [],
jumpPage: 0,
}
},
created() {// currentPage assignment ved initialisering
this.currentPage = this.initPage
}
Metoder: {
go (side) {
if(side < 1) {
side = 1
}
if(side > this.totalPage) {
side = this.totalPage
}
if(page === this.currentPage) {
Tilbagevenden
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
side: dette.nuværende side
})
}
},
se: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>

Næste skridt er, hvordan man får værdien af sidearrayet. Da siderne altid er stærkt relateret til den aktuelle side og de showItems, der skal vises i konfigurationen, er det fuldt ud muligt at ændre sider til en beregnet egenskab:

computed: {
pages () {
Sidenummerarrayet opnås ud fra start- og slutsidenumrene
let getPages = (start,end) => {
if(start <= 1 || start > slut || start >= this.totalPage) {
start = 2
}
if(slut >= denne.totalSide || slut < start || slut <= 1) {
slut = this.totalSide - 1
}
Lad arr = []
for(lad i = start; I <= slut; i++) {
arr.push(i)
}
Return ARR
}
let counts = this.showItems
hvis (this.totalPage < tæller + 2) {
returner getPages(2,this.totalPage)
} ellers {
if(this.currentPage <= Math.ceil(counts/2)) {
returner getPages(2,tæller)
} ellers hvis(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
returner getPages(this.totalSide + 1 - counts,this.totalPage - 1)
} ellers {
lad halvdelen = Math.ceil(counts/2) - 1
let end = this.currentPage + half
hvis(tæller % 2 === 0) {
slut++
}
returner getPages(this.currentPage - half,end)
}
}
}
}

Funktionel udvidelse

På dette tidspunkt er en almindelig sidevendingskomponent grundlæggende implementeret (stilen kan tilpasses selv). Men ofte (især med nogle ledelsesbaggrunde), kombineret med vue-router for at lave en SPA, er der som regel sådanne krav:

Efter at have bladret til en side i en bestemt liste, klik på et element for at gå til redigeringssiden, og efter redigeringen vil du kunne vende tilbage til siden, før du hopper.

Dette krav er ikke særlig praktisk at implementere, hvis du kun bruger pager-komponenten ovenfor. Nogle vil måske sige, at det er okay at kombinere vuex, men i dette tilfælde er det nødvendigt at registrere sidetallet før springet i tilstanden. Hvis der er mange sidebladringslister, er det selvfølgelig ikke elegant at registrere flere sider.

Men på grund af Vue-Router-implementeringens elegance er det let at opfylde ovenstående krav:
Først, tilføj tilstandskonfigurationen på propsene, fordi når tilstanden er parametre, skal springet vide, hvilken rute det er på, så:

mode: {
type: Streng,
standard: 'event' // 'event' | 'forespørgsel' | 'params'
},
routeName: {
type: Streng
}

Foretag derefter nogle ændringer i selve jumping logic-metoden go(side):

go (side) {
if(side < 1) {
side = 1
}
if(side > this.totalPage) {
side = this.totalPage
}
if(page === this.currentPage) {
Tilbagevenden
}
this.currentPage = parseInt(page,10)
if(this.mode == 'forespørgsel') {
let query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} ellers hvis(this.mode == 'parametre') {
lad params = dette.$route.params
params.page = denne.currentPage
this.$router.go({name: this.routeName,parametre: parametre})
} ellers {
this.$emit('go-page',{
side: dette.nuværende side
})
}
}

Dette fuldender grundlæggende en simpel og universel sidevendingskomponent, som ikke kan sendes til repositoryet, så alle kan bruge den.
Sidevendingskomponenten, som endelig er implementeret i denne artikel, er blevet frigivet, og du kan se en bølge af kildekode:
Vue-simple-pager

[Vue] Vue teknisk klistermærke

Afsnit set