|
Pirmkārt, pēdējais atveidojumu vilnis: ![]()
PamatelementiPirmkārt, peidžeru komponentam (turpmāk tekstā "peidžera komponents") parasti pieder šādi elementi: Inicializācijai nepieciešamās konfigurācijas ir šādas: totalPage initPage showPrev (vai rādīt iepriekšējo lapu) showNext (vai rādīt nākamo lapu) showItems (dažas lappuses vidū) showJump (vai rādīt lēcienu uz kuru lapu)
Tos var saņemt, izmantojot vue rekvizītus. Turklāt pašam peidžera komponentam ir jābūt currentPage, kas ieraksta pašreizējo lapu, lappušu masīvs tiek izmantots, lai ietilptu vidū redzamais lappuses numurs, un jumpPage saista lēciena lappuses numura ievadi. Pamata realizācijaAtbilstošais kods ir:
<template>
<div class="peidžeris-iesaiņotājs" v-if="totalPage > 0">
<div class="peidžeru lapas">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > iepriekšējās lapas</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pages[0] > 2">...</strong>
<a v-for="lapa lapās" :class="{active: currentPage == lapa ? 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ākamo lapu</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="peidžeris-lēciens">
<span>Total <em class="jump-total">{{totalPage}}</em> lapa, pāriet uz</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>lapa</span>
<a @click="go(jumpPage)" > noteikts</a>
</div>
</div>
</template>
<script>
eksportēt noklusējumu {
rekvizīti: {
totalPage: { // Kopējais lappušu skaits
veids: numurs,
noklusējums: 1,
Obligāts: patiess
},
showItems: { // Parādīto lappušu skaits, piem.: 1 ... 34[5]67 ... 10
veids: numurs,
Noklusējums: 5
},
showPrev: { // vai rādīt "Iepriekšējais"
tips: Būls,
Noklusējums: true
},
showNext: { // Vai rādīt "Next"
tips: Būls,
Noklusējums: true
},
showJump: { // vai rādīt "Lēkt"
tips: Būls,
Noklusējums: true
},
initPage: {
veids: numurs,
Noklusējums: 1
}
},
dati () {
atgriezties {
pašreizējā lapa: 0,
lapas: [],
jumpPage: 0,
}
},
created() {// currentPage piešķiršana inicializācijas laikā
this.currentPage = this.initPage
}
Metodes: {
iet (lapa) {
if(< 1. lpp.) {
lapa = 1
}
if(lapa > this.totalPage) {
lapa = šī.totalLapa
}
if(page === this.currentPage) {
Atgriešanās
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
lapa: this.currentPage
})
}
},
skatīties: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Nākamais solis ir tas, kā iegūt lapu masīva vērtību. Tā kā lapas vienmēr ir cieši saistītas ar pašreizējo lapu un showItems, kas jāparāda konfigurācijā, ir pilnīgi iespējams mainīt lapas uz aprēķināto rekvizītu:
computed: {
lapas () {
Lappušu numuru masīvs tiek iegūts, pamatojoties uz sākuma un beigu lappušu numuriem
let getPages = (sākums, beigas) => {
if(sākums <= 1 || sākums > beigas || sākums >= this.totalPage) {
sākums = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
beigas = šis.totalPage - 1
}
Ļaujiet arr = []
for(let i = sākt; i < = beigas; i++) {
arr.push(i)
}
Atgriezties ARR
}
ļaujiet counts = this.showItems
if(this.totalPage < skaits + 2) {
atgriezties getPages(2;this.totalPage)
} citādi {
if(this.currentPage <= Math.ceil(counts/2)) {
atgriezt getPages(2;counts)
} else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} citādi {
ļaujiet pusei = Math.ceil(skaitļi/2) - 1
let end = this.currentPage + puse
if(skaita % 2 === 0) {
beigas++
}
return getPages(this.currentPage - puse,beigas)
}
}
}
}
Funkcionālā paplašināšanaŠajā brīdī pamatā tiek ieviests parasts lapas pārvēršanas komponents (stilu var pielāgot pats). Tomēr daudzas reizes (īpaši dažas vadības fons), apvienojumā ar vue-maršrutētāju, lai izveidotu SPA, parasti ir šādas prasības: Pēc pārvēršanas uz lapu noteiktā sarakstā noklikšķiniet uz vienuma, lai dotos uz rediģēšanas lapu, un pēc rediģēšanas vēlaties atgriezties lapā pirms lēkšanas.
Šī prasība nav ļoti ērti īstenojama, ja izmantojat tikai iepriekš minēto peidžeru komponentu. Daži cilvēki var teikt, ka ir labi apvienot vuex, bet šajā gadījumā ir nepieciešams ierakstīt lapas numuru pirms lēciena valstī. Ja ir daudz lappušu pārvēršanas sarakstu, acīmredzot nav eleganti ierakstīt vairākas lapas. Tomēr, pateicoties Vue-Router ieviešanas elegancei, ir viegli izpildīt iepriekš minētās prasības:
Pirmkārt, pievienojiet režīma konfigurāciju rekvizītiem, jo, ja režīms ir parametrs, lēcienam ir jāzina, kurā maršrutā tas atrodas, tādēļ:
mode: {
tips: virkne,
Noklusējums: 'notikums' // 'notikums' | 'vaicājums' | "Params"
},
routeName: {
tips: Virkne
}
Pēc tam veiciet dažas izmaiņas faktiskajā lēciena loģikas metodē go(page):
iet (lapa) {
if(< 1. lpp.) {
lapa = 1
}
if(lapa > this.totalPage) {
lapa = šī.totalLapa
}
if(page === this.currentPage) {
Atgriešanās
}
this.currentPage = parseInt(page,10)
if(this.mode == 'vaicājums') {
ļaujiet vaicājumam = šis.$route.query
query.page = šī.pašreizējā lapa
this.$router.go({vaicājums: vaicājums})
} else if(this.mode == 'params') {
ļaujiet params = šis.$route.params
params.page = this.currentPage
this.$router.go({nosaukums: this.routeName,params: params})
} citādi {
this.$emit('go-page',{
lapa: this.currentPage
})
}
}
Tas būtībā pabeidz vienkāršu un universālu lapas pagriešanas komponentu, kuru nevar nosūtīt uz repozitoriju, lai visi to izmantotu.
Lapas pagriešanas komponents, kas beidzot ieviests šajā rakstā, ir izlaists, un jūs varat redzēt avota koda vilni:
vue-simple-pager
|
Publicēts 25.07.2019 16:12:31
|
|
|
