Пагинация

<script lang="ts" setup>
import { ref } from 'vue';
import { PagePaginator } from "luna";
const total = 500;
const limit = 20;
const currentPage = ref<number>(1);

const setPage = (page: number) => {
  currentPage.value = page;
}
</script>
<template>
  <PagePaginator :page="currentPage" :total="total" :limit="limit" @set-page="setPage" :max-items="10"></PagePaginator>
  <PagePaginator :page="currentPage" :total="total" :limit="limit" @set-page="setPage" :max-items="10" :compact="true"></PagePaginator>
</template>

• <
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• ...
• 25
• >

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Параметры

total: number - общее кол-во элементов

page: number - текущая страница

limit: number - кол-во элементов на страницу

maxItems: number - кол-во отображаемых страниц. По умолчанию 11

busy: boolean - индикатор загрузки

compact: boolean - компактный режим

@setPage(page: number) - событие перехода на страницу(запускается при клике)