42 lines
980 B
Vue
42 lines
980 B
Vue
<script setup lang="ts">
|
|
import 'tui-pagination.css';
|
|
import Pagination from 'tui-pagination/dist/tui-pagination';
|
|
import type { PaginationType } from '~/types/data/pagination';
|
|
|
|
const instance = ref();
|
|
const paginationRef = ref();
|
|
const props = defineProps<PaginationType>();
|
|
const emit = defineEmits(['change']);
|
|
|
|
onMounted(() => {
|
|
instance.value = new Pagination(paginationRef.value, {
|
|
totalItems: props.totalItems,
|
|
itemPerPage: props.itemsPerPage,
|
|
visiblePages: props.visiblePages ?? 10,
|
|
centerAlign: props.centerAlign ?? false,
|
|
usageStatistics: false
|
|
});
|
|
|
|
instance.value.on('beforeMove', (data: any) => {
|
|
emit('change', data.page);
|
|
});
|
|
});
|
|
|
|
watch(
|
|
() => props,
|
|
(newValue) => {
|
|
instance.value.setItemsPerPage(newValue.itemsPerPage);
|
|
instance.value.setTotalItems(newValue.itemsPerPage);
|
|
},
|
|
{
|
|
deep: true
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="paginationRef" class="tui-pagination"></div>
|
|
</template>
|
|
|
|
<style scoped></style>
|