|
Przede wszystkim ostatnia fala wizualizacji: ![]()
Podstawowe elementyPrzede wszystkim elementy najczęściej należące do komponentu pagera (dalej nazywanego "komponentem pager") to: Konfiguracje wymagane do inicjalizacji to: totalPage initPage showPrev (czy wyświetlić poprzednią stronę) showNext (czy wyświetlić następną stronę) showItems (kilka stron pośrodku) showJump (czy pokazać skok do strony, na którą przechodzi)
Można je otrzymać przez rekwizyty Vue. Dodatkowo, sam komponent pagera musi mieć currentPage zapisujący bieżącą stronę, tablica stron służy do uwzględnienia numeru strony wyświetlanego pośrodku, a jumpPage wiąże numer strony skoku. Podstawowa realizacjaOdpowiadający im kod to:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > poprzedniej stronie</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pages[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] < całkowitaStrona - 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)" > następnej stronie</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> stronie, przejdź do</span>
<typ wejścia="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>Strona</span>
<a @click="go(jumpPage)" > determinowany</a>
</div>
</div>
</template>
<script>
eksportuj domyślnie {
Rekwizyty: {
totalPage: { // Łączna liczba stron
typ: Numer,
Domyślnie: 1,
wymagane: prawdziwe
},
showItems: { // Liczba wyświetlanych stron, np.: 1 ... 34[5]67 ... 10
typ: Numer,
Domyślnie: 5
},
showPrev: { // czy pokazać "Previous"
typ: Boolean,
domyślnie: prawdziwe
},
showNext: { // Czy wyświetlić "Next"
typ: Boolean,
domyślnie: prawdziwe
},
showJump: { // czy wyświetlić "Jump"
typ: Boolean,
domyślnie: prawdziwe
},
initPage: {
typ: Numer,
Domyślnie: 1
}
},
dane () {
return {
currentPage: 0,
strony: [],
jumpPage: 0,
}
},
created() {// currentPage assignment przy inicjalizacji
this.currentPage = this.initPage
}
Metody: {
go (strona) {
if(strona < 1) {
strona = 1
}
if(page > this.totalPage) {
strona = to.totalStrona
}
if(page === this.currentPage) {
powrót
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
strona: this.currentPage
})
}
},
Zobacz: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Kolejnym krokiem jest uzyskanie wartości tablicy stron. Ponieważ strony są zawsze silnie powiązane z bieżącą stroną oraz z elementami showItems wyświetlanymi w konfiguracji, całkowicie możliwe jest przekształcenie stron na obliczoną właściwość:
computed: {
strony () {
Tablica numerów stron jest uzyskiwana na podstawie numerów początkowych i końcowych stron
niech getPages = (start,end) => {
if(start <= 1 || start > end || start >= this.totalPage) {
start = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
koniec = to.totalStrona - 1
}
niech arr = []
for(niech i = zaczyna; i <= koniec; i++) {
arr.push(i)
}
return arr
}
niech counts = this.showItems
if(this.totalPage < liczy się + 2) {
return getPages(2,this.totalPage)
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} w przeciwnym razie jeśli(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} else {
niech połowa = Math.ceil(liczy/2) - 1
niech koniec = this.currentPage + połowa
if(liczy % 2 === 0) {
end++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Rozszerzenie funkcjonalneW tym momencie zasadniczo implementowany jest zwykły komponent przewracający strony (styl można dostosować samodzielnie). Jednak często (zwłaszcza z doświadczenia menedżerskiego), w połączeniu z vue-routerem tworząc SPA, zwykle istnieją takie wymagania: Po przewróceniu na stronę z określonej listy kliknij na element, aby przejść do strony edycji, a po edycji chcesz móc wrócić do tej strony przed przeskokiem.
Ten wymóg nie jest zbyt wygodny do wdrożenia, jeśli używasz tylko powyższego komponentu pagera. Niektórzy mogą powiedzieć, że można połączyć Vuex, ale w tym przypadku konieczne jest zapisanie numeru strony przed przejściem do stanu. Jeśli jest wiele list do przewracania stron, oczywiście nie jest eleganckie nagrywać wiele stron. Jednak dzięki elegancji implementacji Vue-Router, łatwo jest spełnić powyższe wymagania:
Najpierw dodaj konfigurację trybu na propach, ponieważ gdy tryb jest parametrem, skok musi wiedzieć, na której trasie się znajduje, więc:
mode: {
typ: String,
domyślnie: 'event' // 'event' | 'query' | 'params'
},
routeName: {
typ: Struna
}
Następnie wprowadź zmiany w rzeczywistej metodzie logiki skakania go(page):
go (strona) {
if(strona < 1) {
strona = 1
}
if(page > this.totalPage) {
strona = to.totalStrona
}
if(page === this.currentPage) {
powrót
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
niech query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} w przeciwnym razie jeśli(this.mode == 'params') {
niech parametry = to.$route.parametrów
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} else {
this.$emit('go-page',{
strona: this.currentPage
})
}
}
To zasadniczo kończy prosty i uniwersalny komponent do przewracania stron, którego nie można wysłać do repozytorium do użytku dla wszystkich.
Komponent przewracania stron, w końcu zaimplementowany w tym artykule, został wydany i można zobaczyć falę kodu źródłowego:
vue-simple-pager
| 
Opublikowano 25.07.2019 16:12:31
|
|
|
