Vue 3 based smooth signature drawing component ✨
npm install @selemondev/vue3-signature-pad
``sh✨ Auto-detect
npx nypm install @selemondev/vue3-signature-pad
Usage
vue
height="400px"
width="1280px"
:max-width="2"
:min-width="2"
:disabled="state.disabled"
/>
`Props
| name | type | default | description |
|:-------------:|:-------------:|:-------------------------:| :-----------------: |
| option |
| {penColor:"oklch(0.0% 0.000 0.0)", backgroundColor:"oklch(100.0% 0.000 89.9)"} | penColor and backgroundColor |
| width | String | "100%" | Pad width |
| height | String | "100%" | Pad height |
| throttle | Number | 16 | Draw the next point at most once per every x milliseconds |
| maxWidth | Number | 2 | Maximum thickness of the pen line |
| minWidth | Number | 2 | Minimum thickness of the pen line |
| clearOnResize | Boolean | false |Clear canvas on window resize|
| scaleOnResize | Boolean | true |When true, scales the signature image to fit new canvas dimensions on resize. When false, redraws using original stroke data without distortion (useful for orientation changes on mobile devices)|
| waterMark | Object | {} |Add addWaterMark |
| disabled | Boolean | false |Disable canvas |
| defaultUrl | String | "" |Show image by default |Events
| name | params | description |
| :-------------: |:-------------: |:-------------:|
| saveSignature | format (() / image/jpeg / image/svg) | Save image as PNG/JPEG or SVG |
| clearCanvas | | Clear canvas |
| isCanvasEmpty | | Returns true if the canvas is empty, otherwise it returns false |
| undo | | Remove the last drawing |
| addWaterMark | {} | Add waterMark
| fromDataURL | (url) | Draw signature image from data URL.
| handleBeginStroke | | Emits
Signature started when the user starts drawing on the canvas.
| handleEndStroke | | Emits Signature ended when the user stops drawing on the canvas.
| handleBeforeUpdateStroke | | Emits Signature before update before the drawing gets updated on the canvas.
| handleAfterUpdateStroke | | Emits Signature after update` after the drawing gets updated on the canvas.- Vue 3 Signature - Vue 3 Signature Pad is an enhanced version of Vue 3 Signature with type safety and more options.