Vue teknisk klistermärke

Zhaoxiaojiey · Publicerad på 2019-07-25 16:12:31

Först och främst, den senaste vågen av renderingar:

Grundläggande element

För det första är de element som vanligtvis ägs av personsökarkomponenten (hädanefter kallad "sökarkomponenten") följande:

Tidigare
Sida 1
Sidnumret visas i mitten
Sista sidan
Nästa

De konfigurationer som krävs för initialisering är:

totalPage
initPage
showPrev (om föregående sida ska visas)
showNext (om nästa sida ska visas)
showItems (några sidor i mitten)
showJump (om hoppet ska visas till vilken sida det går i)

Dessa kan tas emot via vues rekvisita.

Dessutom måste pager-komponenten ha en aktuell sida som registrerar den aktuella sidan, sidarrayen används för att rymma sidnumret som visas i mitten, och jumpPage binder inmatningen av hoppsidnumret.

Grundläggande insikt

Den motsvarande koden är:

<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 & showPrev" @click="go(currentPage - 1)" > föregående sida</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<stark v-show="sidor[0] > 2">...</strong>
<a v-for="page in pages" :class="{active: currentPage == page ? true : false}" @click="go(page)">{{page}}</a>
<stark 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ästa sida</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total < klass="hopp-total">{{totalPage}}</em> sida, hoppa till</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" klass="jump-input">
<span>sida</span>
<a @click="go(jumpPage)" > bestämd</a>
</div>
</div>
</template>
<script>
export default {
prop: {
totalSida: { // Totalt antal sidor
typ: Nummer,
standard: 1,
Krävs: Sant
},
showItems: { // Antal sidor visade, t.ex.: 1 ... 34[5]67 ... 10
typ: Nummer,
Standard: 5
},
showPrev: { // om man ska visa "Previous"
typ: Boolesk,
Standard: Sant
},
showNext: { // Om man ska visa "Next"
typ: Boolesk,
Standard: Sant
},
showJump: { // om man ska visa "Jump"
typ: Boolesk,
Standard: Sant
},
initPage: {
typ: Nummer,
standard: 1
}
},
data () {
återvända {
currentPage: 0,
sidor: [],
hoppaSida: 0,
}
},
created() {// currentPage-tilldelning vid initialisering
detta.nuvarandeSida = detta.initSida
}
Metoder: {
Go (sida) {
if(sida < 1) {
sida = 1
}
if(page > this.totalPage) {
sida = detta.totalSida
}
if(page === this.currentPage) {
Återkomsten
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
sida: detta.nuvarande sida
})
}
},
Titta: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>

Nästa steg är hur man får värdet på sidarrayen. Eftersom sidor alltid är starkt relaterade till den aktuella sidan och showItems som behöver visas i konfigurationen, är det fullt möjligt att ändra sidor till en beräknad egenskap:

computed: {
sidor () {
Sidnummerarrayen erhålls baserat på start- och slutsidnumren
let getPages = (start,end) => {
if(start <= 1 || start > end || start >= this.totalPage) {
start = 2
}
if(slut >= detta.totalSida || slut < start || slut <= 1) {
slut = detta.totalSida - 1
}
Låt arr = []
för(låt i = start; I <= slut; i++) {
arr.push(i)
}
Return ARR
}
let counts = detta.showItems
if(this.totalPage < counts + 2) {
returnera getPages(2,this.totalPage)
} annars {
if(this.currentPage <= Math.ceil(counts/2)) {
returnera getPages(2,counts)
} annars om(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
returnera getPages(detta.totalSida + 1 - räkna,detta.totalSida - 1)
} annars {
låt hälften = Math.ceil(counts/2) - 1
let end = detta.nuvarandeSida + halva
om(räknar % 2 === 0) {
slut++
}
returnera getPages(this.currentPage - half,end)
}
}
}
}

Funktionell expansion

Vid denna punkt är en vanlig bladvändningskomponent i princip implementerad (stilen kan anpassas själv). Men ofta (särskilt med viss bakgrund inom ledning), kombinerat med vue-router för att skapa en SPA, finns det vanligtvis sådana krav:

Efter att ha bläddrat till en sida i en viss lista, klicka på ett objekt för att gå till redigera-sidan, och efter redigeringen vill du kunna återvända till sidan innan du hoppar.

Detta krav är inte särskilt smidigt att implementera om du bara använder personsökarkomponenten ovan. Vissa kanske säger att det är okej att kombinera vuex, men i det här fallet är det nödvändigt att registrera sidnumret innan hoppet i delstaten. Om det finns många sidvändningslistor är det uppenbarligen inte elegant att skriva in flera sidor.

Men på grund av Vue-Router-implementationens elegans är det lätt att uppfylla ovanstående krav:
Lägg först till lägeskonfigurationen på propellerna, eftersom när läget är parametrar måste hoppet veta vilken rutt det är på, så:

mode: {
typ: Sträng,
standard: 'event' // 'event' | 'fråga' | 'params'
},
routeName: {
typ: Sträng
}

Gör sedan några ändringar i själva hopplogikmetoden (gå(sida):

Go (sida) {
if(sida < 1) {
sida = 1
}
if(page > this.totalPage) {
sida = detta.totalSida
}
if(page === this.currentPage) {
Återkomsten
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
let query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} annars if(this.mode == 'parametrar') {
låt params = detta.$route.params
params.page = detta.nuvarandeSida
this.$router.go({name: this.routeName,params: params})
} annars {
this.$emit('go-page',{
sida: detta.nuvarande sida
})
}
}

Detta fullbordar i princip en enkel och universell sidvändningskomponent, som inte kan skickas till arkivet för att alla ska kunna använda den.
Sidblädringskomponenten som slutligen implementerades i denna artikel har släppts, och du kan se en våg av källkod:
Vue-simple-pager

[Vue] Vue teknisk klistermärke

Avsnitt som ses