78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
|
|
import { MoreHorizontal } from "lucide-vue-next";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationEllipsis,
|
|
PaginationItem,
|
|
PaginationNext,
|
|
PaginationPrevious
|
|
} from "@/components/ui/pagination";
|
|
|
|
import type { PaginationProps } from "./type";
|
|
|
|
const props = withDefaults(defineProps<PaginationProps & { load: boolean }>(), {
|
|
total: 0,
|
|
pageSize: 5,
|
|
currentPage: 1
|
|
});
|
|
|
|
const emits = defineEmits<{
|
|
"update:page": [page: number];
|
|
}>();
|
|
|
|
const pageCount = computed(() => Math.ceil(props.total / props.pageSize));
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 分页器 -->
|
|
<Pagination
|
|
v-slot="{ page }"
|
|
:page="props.currentPage"
|
|
:items-per-page="props.pageSize"
|
|
:total="props.total"
|
|
:show-edges="true"
|
|
:disabled="props.load || pageCount <= 1"
|
|
class="select-none"
|
|
:class="`justify-${props.align || 'center'}`"
|
|
@update:page="(val: number) => emits('update:page', val)"
|
|
>
|
|
<PaginationContent v-slot="{ items }">
|
|
<PaginationPrevious class="w-5.5 h-5.5 text-primary!">
|
|
<ChevronLeftIcon class="size-4" />
|
|
</PaginationPrevious>
|
|
<template v-for="(item, index) in items" :key="index">
|
|
<PaginationItem
|
|
v-if="item.type === 'page'"
|
|
:value="item.value"
|
|
:is-active="item.value === page"
|
|
class="w-fit min-w-5.5 h-5.5 text-xs px-1 text-muted-foreground"
|
|
:class="{
|
|
'text-primary! border-primary!': item.value === page
|
|
}"
|
|
>
|
|
{{ item.value }}
|
|
</PaginationItem>
|
|
<PaginationEllipsis
|
|
v-else-if="item.type === 'ellipsis'"
|
|
class="text-muted-foreground"
|
|
>
|
|
<Button
|
|
variant="outline"
|
|
:disabled="props.load"
|
|
class="w-5.5 h-5.5 rounded-2xl border-transparent bg-background p-0 text-[12px] text-muted-foreground"
|
|
>
|
|
<MoreHorizontal class="size-4" />
|
|
</Button>
|
|
</PaginationEllipsis>
|
|
</template>
|
|
<PaginationNext class="w-5.5 h-5.5 text-primary!">
|
|
<ChevronRightIcon class="size-4" />
|
|
</PaginationNext>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</template>
|