|
Esiteks, viimane renderduslaine: ![]()
PõhielemendidEsiteks on piiparkomponendi (edaspidi "piiparkomponendi") tavaliselt omatud elemendid: Initsialiseerimiseks vajalikud konfiguratsioonid on: totalPage initPage showPrev (kas näidata eelmist lehte) showNext (kas näidata järgmist lehte) showItems (paar lehekülge keskel) showJump (kas näidata hüpet lehele, kuhu see läheb)
Neid saab kätte Vue rekvisiitide kaudu. Lisaks peab piipari komponendil endal olema currentPage, mis salvestab praeguse lehekülje, lehekülgede massiivi kasutatakse keskel kuvatava lehekülje numbri mahutamiseks ning hüppeleht seob hüppelehenumbri sisendi. Põhiline realiseerimineVastav kood on:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > eelmine leht</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="lehed[0] > 2">...</strong>
<a v-for="lehekülg" :class="{aktiivne: currentPage == leht ? 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)" > järgmine leht</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> leht, hüppa</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>lehekülg</span>
<a @click="go(jumpPage)" > määratud</a>
</div>
</div>
</template>
<script>
ekspordi vaikimisi {
Rekvisiidid: {
totalPage: { // Lehekülgede koguarv
tüüp: Number,
vaikimisi: 1,
Nõutav: tõene
},
showItems: { // Kuvatavate lehtede arv, nt: 1 ... 34[5]67 ... 10
tüüp: Number,
vaikimisi: 5
},
showPrev: { // kas näidata "Eelmine"
tüüp: Boolean,
vaikimisi: tõeline
},
showNext: { // Kas näidata "Next"
tüüp: Boolean,
vaikimisi: tõeline
},
showJump: { // kas näidata "Jump"
tüüp: Boolean,
vaikimisi: tõeline
},
initPage: {
tüüp: Number,
vaikimisi: 1
}
},
andmed () {
return {
currentLehekülg: 0,
leheküljed: [],
jumpPage: 0,
}
},
created() {// currentPage määramine initsialiseerimisel
this.currentPage = this.initPage
}
Meetodid: {
Go (leht) {
if(lehekülg < 1) {
lehekülg = 1
}
if(page > this.totalPage) {
page = this.totalPage
}
if(page === this.currentPage) {
Tagasitulek
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
leht: this.currentPage
})
}
},
Vaata: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Järgmine samm on, kuidas saada lehekülgede massiivi väärtus. Kuna lehed on alati tugevalt seotud praeguse lehekülje ja seadistuses kuvatavate showItemidega, on täiesti võimalik muuta lehekülgi arvutatud omaduseks:
computed: {
leheküljed () {
Leheküljenumbrite massiiv saadakse algus- ja lõpulehe numbrite põhjal
let getPages = (algus, lõpp) => {
if(start <= 1 || start > end || start >= this.totalPage) {
start = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
lõpp = see.totalLehekülg - 1
}
olgu arr = []
for(let i = start; i <= lõpp; i++) {
arr.push(i)
}
Return arr
}
lets counts = this.showItems
if(this.totalPage < loendab + 2) {
return getPages(2,this.totalPage)
} muidu {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2, loendab)
} else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - loendab, see.totalPage - 1)
} muidu {
olgu pool = Math.ceil(loendused/2) - 1
let end = see.currentPage + pool
if(loendab % 2 === 0) {
lõpp++
}
tagasta getPages(this.currentPage - pool, lõpp)
}
}
}
}
Funktsionaalne laiendusSelles etapis on põhimõtteliselt rakendatud tavaline lehekülgede keeramise komponent (stiili saab ise kohandada). Kuid sageli (eriti mõne haldustaustaga) koos vue-ruuteriga SPA loomiseks on tavaliselt sellised nõuded: Kui oled lehele keeranud teatud nimekirjas, klõpsa ühel elemendil, et minna redigeerimislehele, ja pärast muutmist soovid enne hüppamist lehele tagasi minna.
See nõue ei ole eriti mugav rakendada, kui kasutad ainult ülaltoodud piipari komponenti. Mõned võivad öelda, et Vuexi kombineerimine on okei, kuid sel juhul tuleb lehekülje number enne hüpet osariigis üles märkida. Kui lehekülgede keeramise nimekirju on palju, pole ilmselgelt elegantne salvestada mitut lehekülge. Kuid tänu Vue-Routeri rakenduse elegantsile on ülaltoodud nõuete täitmine lihtne:
Esiteks lisa režiimi konfiguratsioon rekvisiitidele, sest kui režiim on parameetrid, peab hüpe teadma, millisel marsruudil ta on, nii et:
mode: {
tüüp: String,
vaikimisi: 'sündmus' // 'sündmus' | 'päring' | 'Params'
},
routeName: {
tüüp: String
}
Seejärel tee mõned muudatused tegelikus hüppeloogika meetodis go(page):
Go (leht) {
if(lehekülg < 1) {
lehekülg = 1
}
if(page > this.totalPage) {
page = this.totalPage
}
if(page === this.currentPage) {
Tagasitulek
}
this.currentPage = parseInt(page,10)
if(this.mode == 'päring') {
let query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'params') {
olgu params = see.$route.parameetrid
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} muidu {
this.$emit('go-page',{
leht: this.currentPage
})
}
}
See lõpetab põhimõtteliselt lihtsa ja universaalse lehekülgede pööramise komponendi, mida ei saa repositooriumisse saata, et kõik saaksid seda kasutada.
Selles artiklis lõpuks rakendatud lehekülgede pööramise komponent on avaldatud ning näete lähtekoodi lainet:
vue-simple-pager
| 
Postitatud 25.07.2019 16:12:31
|
|
|
