|
Първо, последната вълна от визуализации: ![]()
Основни елементиПърво, елементите, които обикновено притежават компонентът на пейджъра (наричан по-нататък "компонент пейджър"), са: Конфигурациите, необходими за инициализация, са: totalСтраница initPage showPrev (дали да се показва предишната страница) showNext (дали да се покаже следващата страница) showItems (няколко страници по средата) showJump (дали да се показва скокът към коя страница отива)
Те могат да се приемат чрез реквизитите на Vue. Освен това, самият компонент на пейджъра трябва да има currentPage, който записва текущата страница, масивът на страниците се използва, за да побере номера на страницата, показан в средата, а jumpPage свързва входа на скоковия номер на страницата. Основно реализиранеСъответният код е:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > предишната страница</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="страници[0] > 2">...</strong>
<a v-for="страница в страници" :class="{active: currentPage == страница ? 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)" > следващата страница</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> страница, прескочи</span>
<type на входа="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>страница</span>
<a @click="go(jumpPage)" > определено</a>
</div>
</div>
</template>
<script>
експорт по подразбиране {
реквизит: {
totalСтраница: { // Общ брой страници
тип: Номер,
по подразбиране: 1,
задължително: вярно
},
showItems: { // Брой показвани страници, напр.: 1 ... 34[5]67 ... 10
тип: Номер,
по подразбиране: 5
},
showPrev: { // дали да показвам "Previous"
тип: Булев,
по подразбиране: вярно
},
showNext: { // Дали да се показва "Следващото"
тип: Булев,
по подразбиране: вярно
},
showJump: { // дали да показвам "Jump"
тип: Булев,
по подразбиране: вярно
},
initPage: {
тип: Номер,
по подразбиране: 1
}
},
data () {
return {
текуща страница: 0,
страници: [],
jumpPage: 0,
}
},
created() {// currentPage assignment при инициализация
this.currentPage = this.initPage
}
Методи: {
go (страница) {
if(страница < 1) {
страница = 1
}
if(страница > this.totalPage) {
page = това. totalPage
}
if(page === this.currentPage) {
Връщане
}
this.currentPage = parseInt(страница,10)
това.$emit('go-page',{
страница: this.currentPage
})
}
},
Гледайте: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Следващата стъпка е как да получите стойността на масива от страници. Тъй като страниците винаги са силно свързани с текущата страница и showItems, които трябва да се показват в конфигурацията, напълно възможно е страниците да се сменят към изчислено свойство:
computed: {
страници () {
Масивът с номера на страницата се получава въз основа на началните и крайните номера на страницата
нека getPages = (старт, край) => {
if(start <= 1 || start > end || start >= this.totalPage) {
старт = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
край = това.totalСтраница - 1
}
нека arr = []
for(нека i = начало; I <= край; i++) {
arr.push(i)
}
return arr
}
нека броят = това.showItems
if(this.totalPage < брои + 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 {
нека половината = Math.ceil(counts/2) - 1
нека краят = това.текуща страница + половината
if(броя % 2 === 0) {
край++
}
return getPages(this.currentPage - половина, край)
}
}
}
}
Функционално разширениеВ този момент се реализира обикновен компонент за прелистване на страници (стилът може да се персонализира самостоятелно). Въпреки това, много пъти (особено при някои управленски опити), комбинирани с vue-router за създаване на SPA, обикновено има такива изисквания: След като прелистите на страница от определен списък, кликнете върху елемент, за да отидете на страницата за редактиране, и след редактирането искате да можете да се върнете на страницата преди да преминете.
Това изискване не е много удобно за реализиране, ако използвате само горния компонент на пейджъра. Някои хора може да кажат, че е приемливо да се комбинира vuex, но в този случай е необходимо да се запише номерът на страницата преди скока в състоянието. Ако има много списъци за обръщане на страници, очевидно не е елегантно да се записват няколко страници. Въпреки това, благодарение на елегантността на реализацията на Vue-Router, е лесно да се изпълнят горните изисквания:
Първо, добавете конфигурацията на режима върху проповете, защото когато режимът е парам, скокът трябва да знае по кой маршрут е, така че:
mode: {
тип: String,
по подразбиране: 'събитие' // 'събитие' | 'заявка' | 'Парамс'
},
routeName: {
тип: Струна
}
След това направете някои промени в действителния метод за скокова логика go(страница):
go (страница) {
if(страница < 1) {
страница = 1
}
if(страница > this.totalPage) {
page = това. totalPage
}
if(page === this.currentPage) {
Връщане
}
this.currentPage = parseInt(страница,10)
if(this.mode == 'заявка') {
нека query = това.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'params') {
нека params = това.$route.params
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} else {
това.$emit('go-page',{
страница: this.currentPage
})
}
}
Това по същество завършва прост и универсален компонент за обръщане на страници, който не може да бъде изпратен в хранилището за използване от всички.
Компонентът за обръщане на страници, най-накрая реализиран в тази статия, вече е пуснат и можете да видите вълна от изходен код:
vue-simple-pager
|
Публикувано в 25.07.2019 г. 16:12:31 ч.
|
|
|
