Pagination

Компонент Pagination в библиотеке Naive UI используется для организации постраничного отображения данных. Он обеспечивает управление количеством отображаемых элементов на странице и навигацию между страницами. Основные свойства компонента позволяют полностью контролировать поведение пагинации, включая выбор размера страницы, отображение текущей страницы, настройку кнопок навигации и адаптивность под разные интерфейсы.

import { NPagination } from 'naive-ui'

Базовая структура компонента выглядит следующим образом:

<template>
  <n-pagination v-model:page="currentPage" :page-count="10" />
</template>

<script setup>
import { ref } from 'vue'

const currentPage = ref(1)
</script>

Здесь v-model:page связывает текущую страницу с переменной currentPage, а page-count задаёт общее количество страниц.

Основные свойства

  1. page – номер текущей страницы. Используется совместно с v-model:page для двустороннего связывания.
  2. page-count – общее количество страниц. Может быть вычисляемым значением, если количество элементов динамическое.
  3. page-size – количество элементов на странице. Позволяет гибко управлять размером порций данных.
  4. show-quick-jumper – отображение поля для быстрого перехода на нужную страницу.
  5. show-size-picker – отображение селектора размера страницы для пользователя.
  6. page-sizes – массив доступных размеров страниц, например [10, 20, 50, 100].
  7. disabled – отключение компонента.

События

Компонент поддерживает несколько событий, которые важны для взаимодействия с внешним состоянием:

  • update:page – вызывается при изменении текущей страницы.
  • update:page-size – срабатывает при изменении размера страницы.
  • change – универсальное событие, которое передаёт оба параметра: текущую страницу и размер страницы.

Пример использования событий:

<n-pagination
  v-model:page="currentPage"
  :page-count="20"
  @update:page="handlePageChange"
  @update:page-size="handleSizeChange"
/>

<script setup>
const handlePageChange = (page) => {
  console.log('Текущая страница:', page)
}

const handleSizeChange = (size) => {
  console.log('Новый размер страницы:', size)
}
</script>

Настройка внешнего вида

Naive UI предоставляет несколько способов визуальной настройки пагинации:

  • simple – простая компактная версия пагинации без кнопок перехода по диапазону страниц.
  • round – закругленные кнопки навигации.
  • mini – уменьшенная версия компонента для компактных интерфейсов.
  • page-slot – позволяет полностью кастомизировать отображение номеров страниц через слот.

Пример компактного варианта:

<n-pagination v-model:page="currentPage" :page-count="15" simple round />

Интеграция с динамическими данными

Pagination чаще всего используется совместно с таблицами или списками данных. Для динамического обновления данных можно использовать вычисляемые свойства или отслеживать изменения currentPage:

<template>
  <n-pagination v-model:page="currentPage" :page-count="totalPages" />
  <ul>
    <li v-for="item in pagedData" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentPage = ref(1)
const pageSize = ref(10)
const items = ref([...Array(100).keys()].map(i => ({ id: i, name: `Item ${i}` })))

const totalPages = computed(() => Math.ceil(items.value.length / pageSize.value))

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return items.value.slice(start, start + pageSize.value)
})
</script>

Доступность и адаптивность

  • Keyboard navigation – компонент поддерживает навигацию с клавиатуры по кнопкам «вперед» и «назад».
  • ARIA-атрибуты – автоматически добавляются для кнопок и полей ввода страниц, что повышает доступность для пользователей с ограниченными возможностями.
  • Responsive behavior – свойства simple и mini позволяют адаптировать компонент под мобильные устройства без потери функциональности.

Расширенные возможности

  1. Кастомные слоты – prev, next и page слоты дают полный контроль над визуальным отображением.
  2. Синхронизация с URL – текущую страницу можно хранить в query-параметрах для поддержки навигации через адресную строку.
  3. Интеграция с серверной пагинацией – обновление currentPage и pageSize может инициировать запросы к API, что позволяет обрабатывать большие объемы данных без загрузки всего массива.
<script setup>
import { ref, watch } from 'vue'

const currentPage = ref(1)
const pageSize = ref(20)

watch([currentPage, pageSize], ([page, size]) => {
  fetchDataFromServer(page, size)
})
</script>

Использование этих возможностей делает компонент Pagination гибким инструментом для построения сложных интерфейсов с большими объемами данных, сохраняя при этом удобство пользователя и высокую производительность.

Оглавление