|
Visų pirma, paskutinė atvaizdų banga: ![]()
Pagrindiniai elementaiVisų pirma, gaviklio komponentui (toliau – gaviklio komponentas) paprastai priklausantys elementai yra šie: Inicijavimui reikalingos konfigūracijos: totalPage initPage showPrev (ar rodyti ankstesnį puslapį) showNext (ar rodyti kitą puslapį) showItems (keli puslapiai viduryje) showJump (ar rodyti šuolį į kurį puslapį jis eina)
Juos galima gauti per vue rekvizitus. Be to, pats gaviklio komponentas turi turėti currentPage, kuris įrašo dabartinį puslapį, puslapių masyvas naudojamas viduryje rodomam puslapio numeriui sutalpinti, o jumpPage susieja perėjimo puslapio numerio įvestį. Pagrindinis realizavimasAtitinkamas kodas yra:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > ankstesnį puslapį</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pages[0] > 2">...</strong>
<a v-for="puslapis puslapiuose" :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)" > kitą puslapį</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> puslapyje, pereiti į</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>puslapis</span>
<a @click="go(jumpPage)" > nustatyta</a>
</div>
</div>
</template>
<script>
eksportuoti numatytąjį {
Rekvizitai: {
totalPage: { // Bendras puslapių skaičius
tipas: skaičius,
numatytasis: 1,
Būtina: teisinga
},
showItems: { // Rodomų puslapių skaičius, pvz.: 1 ... 34[5]67 ... 10
tipas: skaičius,
Numatytasis: 5
},
showPrev: { // ar rodyti "Ankstesnis"
tipas: Bulio logika,
Numatytasis: teisinga
},
showNext: { // Ar rodyti "Next"
tipas: Bulio logika,
Numatytasis: teisinga
},
showJump: { // ar rodyti "Jump"
tipas: Bulio logika,
Numatytasis: teisinga
},
initPage: {
tipas: skaičius,
Numatytasis: 1
}
},
duomenys () {
grąžinti {
dabartinis puslapis: 0,
puslapiai: [],
jumpPage: 0,
}
},
created() {// currentPage priskyrimas inicijuojant
this.currentPage = this.initPage
}
Metodai: {
eiti (puslapis) {
if(1 < psl.) {
puslapis = 1
}
if(puslapis > this.totalPage) {
puslapis = šis.totalPage
}
if(page === this.currentPage) {
grįžti
}
this.currentPage = parseInt(puslapis,10)
this.$emit('go-page',{
puslapis: this.currentPage
})
}
},
Žiūrėti: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Kitas žingsnis yra tai, kaip gauti puslapių masyvo vertę. Kadangi puslapiai visada yra glaudžiai susiję su dabartiniu puslapiu ir showItems, kurie turi būti rodomi konfigūracijoje, visiškai įmanoma pakeisti puslapius į apskaičiuotąją ypatybę:
computed: {
puslapiai () {
Puslapių numerių masyvas gaunamas pagal pradžios ir pabaigos puslapių numerius
let getPages = (pradžia, pabaiga) => {
if(pradžia <= 1 || pradžia > pabaiga || pradžia >= this.totalPage) {
pradžia = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
end = this.totalPage - 1
}
tegul arr = []
for(let i = pradėti; i < = pabaiga; i++) {
arr.push(i)
}
Grąžinti ARR
}
tegul skaičiuoja = this.showItems
if(this.totalPage < skaičiuoja + 2) {
return getPages(2,this.totalPage)
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} else {
tegul pusė = Math.ceil(counts/2) - 1
tegul baigiasi = this.currentPage + pusė
jei(skaičiuoja % 2 === 0) {
pabaiga++
}
return getPages(this.currentPage - pusė,pabaiga)
}
}
}
}
Funkcinis išplėtimasŠiuo metu iš esmės įgyvendinamas įprastas puslapio vartymo komponentas (stilių galima pritaikyti pats). Tačiau daug kartų (ypač kai kurie valdymo fonai), kartu su vue-maršrutizatorius padaryti SPA, paprastai yra tokie reikalavimai: Perėję į tam tikro sąrašo puslapį, spustelėkite elementą, kad pereitumėte į redagavimo puslapį, o po redagavimo norite grįžti į puslapį prieš šokinėdami.
Šį reikalavimą nėra labai patogu įgyvendinti, jei naudojate tik aukščiau pateiktą gaviklio komponentą. Kai kurie žmonės gali sakyti, kad derinti vuex yra gerai, tačiau tokiu atveju būtina įrašyti puslapio numerį prieš šuolį valstybėje. Jei yra daug puslapių vartymo sąrašų, akivaizdu, kad nėra elegantiška įrašyti kelis puslapius. Tačiau dėl "Vue-Router" diegimo elegancijos lengva atitikti aukščiau nurodytus reikalavimus:
Pirmiausia pridėkite režimo konfigūraciją ant rekvizitų, nes kai režimas yra parametras, šuolis turi žinoti, kuriuo maršrutu jis yra, taigi:
mode: {
tipas: Styga,
numatytasis: 'įvykis' // 'įvykis' | 'užklausa' | "Parametrai"
},
routeName: {
tipas: Styga
}
Tada atlikite keletą pakeitimų faktiniame šokinėjimo logikos metode go(page):
eiti (puslapis) {
if(1 < psl.) {
puslapis = 1
}
if(puslapis > this.totalPage) {
puslapis = šis.totalPage
}
if(page === this.currentPage) {
grįžti
}
this.currentPage = parseInt(puslapis,10)
if(this.mode == 'užklausa') {
tegul užklausa = šis.$route.query
query.page = šis.dabartinis puslapis
this.$router.go({užklausa: užklausa})
} else if(this.mode == 'params') {
tegul params = this.$route.params
params.page = šis.dabartinis puslapis
this.$router.go({pavadinimas: this.routeName,params: params})
} else {
this.$emit('go-page',{
puslapis: this.currentPage
})
}
}
Tai iš esmės užbaigia paprastą ir universalų puslapio vartymo komponentą, kurio negalima siųsti į saugyklą, kad visi galėtų naudotis.
Šiame straipsnyje pagaliau įdiegtas puslapio vartymo komponentas buvo išleistas, ir galite pamatyti šaltinio kodo bangą:
vue-paprastas-ieškotojas
|
Paskelbta 2019-07-25 16:12:31
|
|
|
