|
În primul rând, ultimul val de randare: ![]()
Elemente de bazăÎn primul rând, elementele deținute frecvent de componenta pager (denumită în continuare "componenta pager") sunt: Configurațiile necesare pentru inițializare sunt: totalPagină initPage showPrev (dacă să arate pagina anterioară) showNext (dacă să afișezi pagina următoare) showItems (câteva pagini la mijloc) showJump (dacă să arăt saltul către pagina la care merge)
Acestea pot fi primite prin recuzita Vue. În plus, componenta pager trebuie să aibă o Pagină curentă care să înregistreze pagina curentă, tabloul de pagini este folosit pentru a acomoda numărul paginii afișat în mijloc, iar jumpPage leagă intrarea numărului de pagină salt. Realizarea de bazăCodul corespunzător este:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 & showPrev" @click="go(currentPage - 1)" > pagina anterioară</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<puternic v-show="pagini[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)" > pagina următoare</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> page, sari la</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>Pagină</span>
<a @click="go(jumpPage)" > determinat</a>
</div>
</div>
</template>
<script>
export default {
Recuzită: {
totalPage: { // Număr total de pagini
tip: Număr,
implicit: 1,
Necesar: Adevărat
},
showItems: { // Numărul de pagini afișate, de exemplu: 1 ... 34[5]67 ... 10
tip: Număr,
Implicit: 5
},
showPrev: { // dacă să arate "Previous"
tip: Boolean,
Implicit: True
},
showNext: { // Dacă să arăți "Next"
tip: Boolean,
Implicit: True
},
showJump: { // dacă să arăți "Jump"
tip: Boolean,
Implicit: True
},
initPage: {
tip: Număr,
Implicit: 1
}
},
data () {
return {
Pagină curentă: 0,
pagini: [],
jumpPage: 0,
}
},
created() {// atribuire currentPage la inițializare
this.currentPage = this.initPage
}
Metode: {
go (pagină) {
if(pagina < 1) {
pagină = 1
}
if(page > this.totalPage) {
pagină = această.totalPagină
}
if(page === this.currentPage) {
Întoarcerea
}
this.currentPage = parseInt(pagina,10)
aceasta.$emit('go-page',{
pagină: aceasta.pagină curentă
})
}
},
Urmărește: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Următorul pas este cum să obții valoarea array-ului de pagini. Deoarece paginile sunt întotdeauna strâns legate de pagina curentă și de showItems care trebuie afișate în configurație, este perfect posibil să se schimbe paginile la o proprietate calculată:
computed: {
pagini () {
Tabloul de numere de pagină se obține pe baza numerelor de început și de sfârșit
let getPages = (start,end) => {
if(start <= 1 || start > end || start >= this.totalPage) {
start = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
sfârșit = aceasta.totalPagină - 1
}
Fie arr = []
pentru (fie i = început; i <= sfârșit; i++) {
arr.push(i)
}
Întoarcerea ARR
}
lasă numărătoare = this.showItems
if(this.totalPage < numără + 2) {
returnează getPages(2,this.totalPage)
} altfel {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} altfel dacă(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} altfel {
fie jumătate = Math.ceil(numărătoare/2) - 1
să se termine = this.currentPage + jumătate
dacă(numără % 2 === 0) {
end++
}
return getPages(this.currentPage - jumătate, sfârșit)
}
}
}
}
Extindere funcționalăÎn acest moment, o componentă obișnuită de întoarcere a paginilor este practic implementată (stilul poate fi personalizat de unul singur). Totuși, de multe ori (mai ales în unele experiențe de management), combinate cu vue-router pentru a crea un SPA, există de obicei astfel de cerințe: După ce întorci la o pagină dintr-o anumită listă, dă click pe un element pentru a merge la pagina de editare, iar după editare, vrei să poți reveni la pagină înainte de a sări.
Această cerință nu este foarte convenabilă de implementat dacă folosești doar componenta pager de mai sus. Unii ar putea spune că este în regulă să combini vuex, dar în acest caz este necesar să notezi numărul paginii înainte de saltul în stat. Dacă există multe liste de răsfoire, evident că nu este elegant să înregistrezi mai multe pagini. Totuși, datorită eleganței implementării Vue-Router, este ușor să se îndeplinească cerințele de mai sus:
Mai întâi, adaugă configurația modului pe prop-uri, pentru că atunci când modul este params, saltul trebuie să știe pe ce rută se află, deci:
mode: {
Tip: Șnur,
implicit: 'eveniment' // 'eveniment' | 'interogare' | "params"
},
routeName: {
Tip: Șnur
}
Apoi fă câteva modificări în metoda logicii reale de salt go(page):
go (pagină) {
if(pagina < 1) {
pagină = 1
}
if(page > this.totalPage) {
pagină = această.totalPagină
}
if(page === this.currentPage) {
Întoarcerea
}
this.currentPage = parseInt(pagina,10)
if(this.mode == 'interogare') {
Let Query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} altfel if(this.mode == 'params') {
Fie params = this.$route.params
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} altfel {
aceasta.$emit('go-page',{
pagină: aceasta.pagină curentă
})
}
}
Aceasta completează practic o componentă simplă și universală de întoarcere a paginilor, care nu poate fi trimisă în depozit pentru ca toată lumea să o folosească.
Componenta de întoarcere a paginii implementată în sfârșit în acest articol a fost lansată, iar tu poți vedea un val de cod sursă:
vue-simple-pager
| 
Postat pe 25.07.2019 16:12:31
|
|
|
