@@ -13,25 +13,58 @@ A Vue 2 component for rendering PDFs with draggable and resizable element overla
1313
1414### Props
1515
16- | Prop | Type | Default |
17- | ------| ------| ---------|
18- | ` width ` | String | ` '100%' ` |
19- | ` height ` | String | ` '100%' ` |
20- | ` initFiles ` | Array | ` [] ` |
21- | ` initFileNames ` | Array | ` [] ` |
22- | ` initialScale ` | Number | ` 1 ` |
23- | ` showPageFooter ` | Boolean | ` true ` |
24- | ` hideSelectionUI ` | Boolean | ` false ` |
25- | ` showSelectionHandles ` | Boolean | ` true ` |
26- | ` showElementActions ` | Boolean | ` true ` |
27- | ` pageCountFormat ` | String | ` '{currentPage} of {totalPages}' ` |
16+ | Prop | Type | Default | Description |
17+ | ------| ------| ---------| -------------|
18+ | ` width ` | String | ` '100%' ` | Container width |
19+ | ` height ` | String | ` '100%' ` | Container height |
20+ | ` initFiles ` | Array | ` [] ` | PDF files to load |
21+ | ` initFileNames ` | Array | ` [] ` | Names for the PDF files |
22+ | ` initialScale ` | Number | ` 1 ` | Initial zoom scale |
23+ | ` showPageFooter ` | Boolean | ` true ` | Show page footer with document name and page number |
24+ | ` hideSelectionUI ` | Boolean | ` false ` | Hide selection handles and actions UI |
25+ | ` showSelectionHandles ` | Boolean | ` true ` | Show resize/move handles on selected elements |
26+ | ` showElementActions ` | Boolean | ` true ` | Show action buttons on selected elements |
27+ | ` pageCountFormat ` | String | ` '{currentPage} of {totalPages}' ` | Format string for page counter |
28+ | ` autoFitZoom ` | Boolean | ` false ` | Automatically adjust zoom to fit viewport on window resize |
2829
2930### Events
3031
3132- ` pdf-elements:end-init ` - Emitted when PDF is loaded
3233
34+ ### Methods
35+
36+ - ` adjustZoomToFit() ` - Manually trigger zoom adjustment to fit viewport (useful when calling programmatically)
37+
3338### Slots
3439
3540- ` element-{type} ` - Custom element rendering (e.g., ` element-signature ` )
3641- ` custom ` - Fallback for elements without specific type
3742- ` actions ` - Custom action buttons
43+
44+ ### Usage Example
45+
46+ ``` vue
47+ <template>
48+ <PDFElements
49+ ref="pdfElements"
50+ :init-files="pdfFiles"
51+ :init-file-names="['document.pdf']"
52+ :auto-fit-zoom="true"
53+ @pdf-elements:end-init="onPdfLoaded"
54+ >
55+ <template #element-signature="{ object, onDelete }">
56+ <CustomSignature :data="object" @delete="onDelete" />
57+ </template>
58+ </PDFElements>
59+ </template>
60+
61+ <script>
62+ export default {
63+ methods: {
64+ onPdfLoaded() {
65+ // PDF is loaded, auto-fit zoom is active
66+ },
67+ },
68+ }
69+ </script>
70+ ```
0 commit comments