Composables
usePdfKitZoom
Kontrol zoom dan manajemen skala.
Composable ini berfungsi untuk mengatur kontrol zoom dan skala pada viewer PDF.
Cara Penggunaan
const {
scale,
zoomMode,
zoomIn,
zoomOut,
setZoom,
zoomPercentage,
zoomPresets,
} = usePdfKitZoom()
Opsi
usePdfKitZoom({
initialScale: 1.0,
minScale: 0.25,
maxScale: 10.0,
scaleDelta: 1.1,
})
| Opsi | Tipe | Default | Deskripsi |
|---|---|---|---|
initialScale | number | ZoomLevel | 1.0 | Skala atau mode zoom awal |
minScale | number | 0.25 | Skala zoom minimum yang diizinkan |
maxScale | number | 10.0 | Skala zoom maksimum yang diizinkan |
scaleDelta | number | 1.1 | Pengali untuk zoom in/out |
Nilai Kembalian
| Properti | Tipe | Deskripsi |
|---|---|---|
scale | Ref<number> | Skala zoom saat ini |
zoomMode | Ref<ZoomLevel> | Mode zoom saat ini |
zoomIn | () => void | Menambah level zoom |
zoomOut | () => void | Mengurangi level zoom |
setZoom | (value: number | ZoomLevel) => void | Mengatur zoom spesifik |
zoomPercentage | ComputedRef<number> | Zoom dalam persentase |
zoomPresets | number[] | Preset zoom yang tersedia |
Tipe ZoomLevel
type ZoomLevel = 'auto' | 'page-fit' | 'page-width' | number
Contoh
<template>
<div class="flex items-center gap-2">
<UButton @click="zoomOut">-</UButton>
<span>{{ zoomPercentage }}%</span>
<UButton @click="zoomIn">+</UButton>
<UButton @click="setZoom('page-fit')">Pas Halaman</UButton>
<UButton @click="setZoom('page-width')">Pas Lebar</UButton>
</div>
</template>
<script setup>
const {
zoomIn,
zoomOut,
setZoom,
zoomPercentage
} = usePdfKitZoom()
</script>