|
Перш за все, остання хвиля візуалізації: ![]()
Основні елементиПо-перше, елементи, які зазвичай належать компоненту пейджера (далі — «компонент пейджера»), такі: Конфігурації, необхідні для ініціалізації, такі: 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>
<сильний v-show="сторінки[0] > 2">...</strong>
<a v-for="сторінка в сторінках" :class="{active: currentPage == page ? true : false}" @click="go(page)">{{page}}</a>
<сильний 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>
<тип введення="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: { // чи показувати «Попередній»
тип: Булевий,
за замовчуванням: true
},
showNext: { // Чи показувати «Далі»
тип: Булевий,
за замовчуванням: true
},
showJump: { // чи варто показувати «Стрибок»
тип: Булевий,
за замовчуванням: true
},
initPage: {
тип: Кількість,
за замовчуванням: 1
}
},
data () {
return {
currentСторінка: 0,
сторінки: [],
jumpPage: 0,
}
},
created() {// currentPage assignment при ініціалізації
this.currentPage = this.initPage
}
Методи: {
go (сторінка) {
if(сторінка < 1) {
сторінка = 1
}
if(сторінка > this.totalPage) {
page = this.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 > кінець || start >= this.totalPage) {
старт = 2
}
if(кінець >= це.totalPage || кінець < початок || кінець <= 1) {
кінець = це.totalСторінка - 1
}
нехай arr = []
for(нехай i = початок; i < = кінець; i++) {
arr.push(i)
}
Повернутися ARR
}
нехай counts = це.showItems
if(this.totalPage < counts + 2) {
return getPages(2,this.totalPage)
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
повернення 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
нехай кінець = це.currentPage + половина
if(counts % 2 === 0) {
кінець++
}
return getPages(this.currentPage - половина, кінець)
}
}
}
}
Функціональне розширенняНа цьому етапі фактично реалізовано звичайний компонент для перегортання сторінок (стиль можна налаштовувати самостійно). Однак часто (особливо деякі управлінські знання), у поєднанні з vue-router для створення SPA, зазвичай існують такі вимоги: Перегорнувши сторінку певного списку, натисніть на елемент, щоб перейти на сторінку редагування, і після редагування потрібно мати можливість повернутися на сторінку перед переходом.
Цю вимогу не дуже зручно реалізувати, якщо ви використовуєте лише компонент пейджера, описаний вище. Дехто може сказати, що комбінувати vuex — це нормально, але в цьому випадку необхідно записати номер сторінки перед стрибком у стані. Якщо списків перегортання сторінок багато, очевидно, що не є елегантним записувати кілька сторінок. Однак завдяки елегантності реалізації Vue-Router легко виконати вищезазначені вимоги:
По-перше, додайте конфігурацію режиму на реквизитах, бо коли режим — параметри, стрибок має знати, на якому маршруті він знаходиться, отже:
mode: {
тип: String,
за замовчуванням: 'подія' // 'подія' | 'запит' | «Парамс»
},
routeName: {
тип: Струна
}
Потім внесіть деякі зміни у фактичний метод логіки стрибка go(page):
go (сторінка) {
if(сторінка < 1) {
сторінка = 1
}
if(сторінка > this.totalPage) {
page = this.totalPage
}
if(page === this.currentPage) {
Повернення
}
this.currentPage = parseInt(page,10)
if(this.mode == 'запит') {
нехай query = це.$route.запит
query.page = this.currentPage
this.$router.go({query: query})
} інакше if(this.mode == 'параметри') {
нехай params = це.$route.параметри
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
|
|
|
