Composables
usePdfKitPageNavigation
Utilitas navigasi halaman.
Menyediakan utilitas navigasi halaman.
Penggunaan
const {
currentPage,
goToPage,
nextPage,
prevPage,
firstPage,
lastPage,
canGoNext,
canGoPrev,
} = usePdfKitPageNavigation({ totalPages: 100 })
Opsi
usePdfKitPageNavigation({
totalPages: 100, // wajib
initialPage: 1,
})
| Opsi | Tipe | Default | Deskripsi |
|---|---|---|---|
totalPages | number | wajib | Total jumlah halaman |
initialPage | number | 1 | Nomor halaman awal |
totalPages adalah opsi wajib. Memanggil composable tanpa opsi ini tidak akan berfungsi — berikan jumlah halaman dokumen secara eksplisit.
:::
Nilai yang Dikembalikan
| Properti | Tipe | Deskripsi |
|---|---|---|
currentPage | Ref<number> | Nomor halaman saat ini |
goToPage | (page: number) => void | Navigasi ke halaman |
nextPage | () => void | Ke halaman berikutnya |
prevPage | () => void | Ke halaman sebelumnya |
firstPage | () => void | Ke halaman pertama |
lastPage | () => void | Ke halaman terakhir |
canGoNext | ComputedRef<boolean> | Dapat ke halaman berikutnya |
canGoPrev | ComputedRef<boolean> | Dapat ke halaman sebelumnya |
Contoh
<template>
<div class="flex items-center gap-2">
<UButton :disabled="!canGoPrev" @click="prevPage">
Sebelumnya
</UButton>
<span>{{ currentPage }} / {{ totalPages }}</span>
<UButton :disabled="!canGoNext" @click="nextPage">
Berikutnya
</UButton>
<UInput
type="number"
:model-value="currentPage"
@change="goToPage(Number($event.target.value))"
/>
</div>
</template>
<script setup>
const totalPages = 100
const {
currentPage,
goToPage,
nextPage,
prevPage,
canGoNext,
canGoPrev,
} = usePdfKitPageNavigation({ totalPages })
const firstPage = () => goToPage(1)
const lastPage = () => goToPage(totalPages)
</script>