Сегодня как никогда важно отображать данные эффективным способом, который не вызывает задержек при загрузке или проблем с рендерингом. Пагинация — это техника, которая разбивает большие страницы данных на более мелкие разделы контента, облегчая пользователю навигацию и поиск нужной информации. Пагинация улучшает UX веб-приложения, а также повышает производительность приложения за счет сокращения общего времени загрузки страниц.
Однако внедрение пагинации с нуля может быть трудоемкой задачей, требующей много усилий и ресурсов. К счастью, существует несколько отличных библиотек с открытым исходным кодом, которые могут упростить этот процесс и повысить эффективность вашей работы. Использование библиотеки пагинации может сэкономить ваше время и усилия, позволяя вам сосредоточиться на создании других, более важных функций вашего приложения.
В этой статье мы рассмотрим некоторые из лучших библиотек пагинации для Vue 3, проанализируем их возможности, популярность и поддержку. Эти библиотеки оснащены готовыми компонентами, стилями и функциональностью, что упрощает разработчикам задачу быстрого добавления пагинации в свои проекты. Давайте приступим!
Содержание статьи
Vue Awesome Paginate
Библиотека Vue Awesome Paginate - это современная и мощная библиотека с множеством легких, настраиваемых и простых в использовании компонентов пагинации. Построенная на TypeScript и Vite, Vue Awesome Paginate предоставляет все функциональные возможности пагинации в одном пакете с нулевыми зависимостями, что делает ее простой в установке и использовании.
Vue Awesome Paginate предлагает полную поддержку настройки для каждого компонента с помощью чистого CSS, что позволяет вам настроить внешний вид и функциональность компонентов пагинации в соответствии с дизайном вашего сайта. Он также обеспечивает поддержку RTL (справа налево), поддержку SEO и поддержку различных локализаций:
Примеры компонентов Vue Awesome Paginate
По умолчанию Vue Awesome Paginate использует следующие реквизиты и события, которые вы можете настроить в соответствии со своими предпочтениями:
<vue-awesome-paginate
:total-items="100"
:items-per-page="5"
:max-pages-shown="5"
v-model="currentPage"
:on-click="onClickHandler"
/>
v-page
V-page - это простая и гибкая библиотека пагинации Vue 3, которая предлагает пользователям ряд возможностей для настройки компонентов пагинации. С v-page вы можете использовать только те компоненты, которые вам нужны, в дополнение к скопированным слотам для более настраиваемых опций.
Вы можете добавить опцию All в список размеров страницы для отображения всех данных без постраничного просмотра, задать текущую страницу, общее количество записей, язык пагинации, меню размеров страницы, направление выравнивания и многое другое с помощью реквизитов.
Когда данные пагинации изменяются, библиотека v-page запускает событие изменения. В целом, v-page - это полезная библиотека для разработчиков Vue, желающих реализовать пагинацию в своих приложениях с различными возможностями настройки. Она поставляется в следующем формате по умолчанию, поэтому вы можете легко добавить дополнительные реквизиты:
<Page
:total-row="21"
@change="changeBasic"
/>
Пример пользовательского интерфейса v-страницы
vuejs-paginate-next
Vuejs-paginate-next - это надежная библиотека Vue, которая упрощает процесс реализации пагинации в приложениях Vue 3. Чтобы обеспечить полную поддержку Vue 3, библиотека vuejs-paginate-next была создана на основе существующей библиотеки vuejs-paginate, которая поддерживает только Vue 2:
vuejs-paginate-next демо
Библиотека предоставляет простой в использовании API, который упрощает разработчикам реализацию пагинации без необходимости написания сложного кода. Она поставляется со стилями по умолчанию из Bootstrap v5, но может быть легко настроена с помощью CSS, что позволяет легко интегрировать ее в существующий дизайн приложения.
Vuejs-paginate-next предоставляет ряд опций для настройки, включая количество отображаемых страниц, количество элементов на странице и текущую страницу. Вы можете использовать его в компоненте в следующем формате:
<paginate
:page-count="20"
:click-handler="functionName"
:prev-text="Prev"
:next-text="Next"
:container-class="className"
/>
Vue Использование функции useOffsetPagination
На момент написания статьи Vue 3 все еще относительно новый, что означает ограниченный выбор библиотек пагинации, доступных для Vue 3. Однако разработчикам все еще доступны быстрые альтернативы; один из подходов - использование внешних библиотек, предоставляющих композитные функции, например, библиотеки Vue Use.
Vue Use предоставляет ряд полезных композитных функций, включая функцию пагинации, которая работает для приложений Vue 3. Библиотека Vue Use имеет небольшой вес, что делает ее быстрым и эффективным решением для реализации пагинации в Vue 3.
В приведенном ниже фрагменте кода показан пример использования функции useOffsetPagination. Сначала мы устанавливаем и импортируем библиотеку в компонент:
npm i @vueuse/core
import { useOffsetPagination } from '@vueuse/core'
В зависимости от варианта использования, мы можем определить различные необходимые опции, параметры и функции:
// Creates a function that gets the current pages data from the database
function fetch(page: number, pageSize: number) {
return new Promise<User[]>((resolve, reject) => {
const start = (page - 1) * pageSize
const end = start + pageSize
setTimeout(() => {
resolve(database.value.slice(start, end))
}, 100)
})
}
const data: Ref<User[]> = ref([])
const page = ref(1)
const pageSize = ref(10)
fetchData({
currentPage: page.value,
currentPageSize: pageSize.value,
})
// This function then calls the fetch function to get the data for the current page
function fetchData({ currentPage, currentPageSize }: { currentPage: number; currentPageSize: number }) {
fetch(currentPage, currentPageSize).then((responseData) => {
data.value = responseData
})
}
Next, we can pass the values into the composition function:
//This shows the implementation of the pagination composable function,the customized values are in as parameters in the function
const {
currentPage,
currentPageSize,
pageCount,
isFirstPage,
isLastPage,
prev,
next,
} = useOffsetPagination({
total: database.value.length,
page: 1,
pageSize,
onPageChange: fetchData,
onPageSizeChange: fetchData,
})
Как только это будет сделано, мы сможем непосредственно интегрировать его в шаблон:
<div>
<div>
total: {{ database.length }}
</div>
<div>
<button :disabled="isFirstPage" @click="prev"> prev </button>
<button
v-for="item in pageCount"
:key="item"
:disabled="currentPage === item"
@click="currentPage = item"
>
{{ item }}
</button>
<button :disabled="isLastPage" @click="next">
next
</button>
</div>
С помощью этого мы легко реализовали функцию постраничного просмотра списка базы данных, которая позволяет нам просматривать сегментированные части списка постранично.
Заключение
Независимо от того, создаете ли вы простое веб-приложение или сложное корпоративное приложение, внедрение функции пагинации может значительно улучшить пользовательский опыт и повысить производительность вашего приложения. С помощью библиотеки пагинации вы можете сделать это легко и эффективно.
В этой статье мы рассмотрели три отличные библиотеки пагинации с открытым исходным кодом, а также композитную функцию useOffsetPagination из библиотеки Vue Use. Когда дело доходит до выбора подходящей библиотеки пагинации, очень важно учитывать конкретные требования вашего проекта и желаемые функции. У каждой библиотеки есть свои сильные и слабые стороны, поэтому перед принятием решения вам следует потратить время на анализ функциональности каждой библиотеки и учесть потребности вашего проекта.
Выбранная библиотека должна соответствовать общему дизайну веб-приложения, чтобы функция пагинации воспринималась как естественная часть пользовательского интерфейса.
Если у вас возникли вопросы, вы можете связаться со мной в Twitter или оставить комментарий ниже.
Спасибо за чтение!