|
Прежде всего, последняя волна рендеров: ![]()
Основные элементыПрежде всего, элементы, обычно принадлежащие компоненту пейджера (далее — «компонент пейджера»), включают: Конфигурации, необходимые для инициализации, следующие: totalСтраница initPage showPrev (показывать ли предыдущую страницу) showNext (показывать ли следующую страницу) showItems (несколько страниц посередине) showJump (показывать ли переход на ту страницу)
Их можно принимать с помощью реквизита vue. Кроме того, сам компонент пейджера должен иметь currentPage, который записывает текущую страницу, массив pages используется для размещения номера страницы, отображаемого посередине, а 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>
<сильный v-show="страницы[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)" > следующей странице</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em>, перейти к</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
страница <span></span>
<a @click="go(jumpPage)" > определен</a>
</div>
</div>
</template>
<script>
экспорт по умолчанию {
Реквизит: {
totalPage: { // Общее количество страниц
тип: Число,
по умолчанию: 1,
требуется: верно
},
showItems: { // Количество отображаемых страниц, например: 1 ... 34[5]67 ... 10
тип: Число,
по умолчанию: 5
},
showPrev: { // показывать ли «Previous»
тип: Булевый,
по умолчанию: верно
},
showNext: { // Показывать ли «Дальше»
тип: Булевый,
по умолчанию: верно
},
showJump: { // показывать ли «Прыжок»
тип: Булевый,
по умолчанию: верно
},
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(page,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) {
end = this.totalСтраница - 1
}
пусть arr = []
for(пусть i = начало; i < = конец; i++) {
arr.push(i)
}
Return arr
}
пусть counts = это.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(counts % 2 === 0) {
end++
}
return getPages(this.currentPage - половина, конец)
}
}
}
}
Функциональное расширениеНа этом этапе реализуется обычный компонент перелистывания страниц (стиль можно настраивать самостоятельно). Однако часто (особенно в некоторых управленческих сферах) в сочетании с vue-router для создания SPA обычно существуют следующие требования: Перелистав страницу из определённого списка, нажмите на элемент, чтобы перейти на страницу редактирования, и после редактирования нужно иметь возможность вернуться на страницу перед переходом.
Это требование не очень удобно реализовать, если вы используете только компонент пейджера выше. Некоторые могут сказать, что комбинировать vuex — это нормально, но в этом случае необходимо зафиксировать номер страницы до перехода в состояние. Если списков перелистывания страниц много, очевидно, что не очень элегантно записывать несколько страниц. Однако благодаря элегантности реализации Vue-Router легко выполнить вышеуказанные требования:
Сначала добавьте конфигурацию режима на пропсы, потому что когда режим — параметры, прыжок должен знать, на каком маршруте он находится, так что:
mode: {
тип: String,
по умолчанию: 'event' // 'event' | 'запрос' | «Парамс»
},
routeName: {
тип: Струна
}
Затем внесите некоторые изменения в сам метод логики прыжков go(page):
go (страница) {
if(страница < 1) {
страница = 1
}
if(страница > this.totalPage) {
page = это.totalPage
}
if(page === this.currentPage) {
Возвращение
}
this.currentPage = parseInt(page,10)
if(this.mode == 'запрос') {
пусть query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'параметры') {
пусть params = this.$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
|
|
|
