Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neighborhood999/vue-signature-pad
🖋 Vue Signature Pad Component
https://github.com/neighborhood999/vue-signature-pad
components signature-pad vue vue-components
Last synced: 4 days ago
JSON representation
🖋 Vue Signature Pad Component
- Host: GitHub
- URL: https://github.com/neighborhood999/vue-signature-pad
- Owner: neighborhood999
- License: mit
- Created: 2018-01-31T03:11:47.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-15T16:12:05.000Z (about 2 months ago)
- Last Synced: 2024-12-26T05:04:52.676Z (11 days ago)
- Topics: components, signature-pad, vue, vue-components
- Language: JavaScript
- Homepage:
- Size: 2.16 MB
- Stars: 536
- Watchers: 8
- Forks: 76
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-canvas - vue-signature-pad - 🖋 Vue Signature Pad Component.   (Libraries / Signature pad)
README
# Vue Signature Pad
[](https://travis-ci.org/neighborhood999/vue-signature-pad)
[](https://www.npmjs.com/package/vue-signature-pad)
[](https://github.com/prettier/prettier)
> Vue component wrap for [signature pad](https://github.com/szimek/signature_pad)
> Note: If you are still using Vue 2, please install **2.0.5** version, for Vue 3 you can install the **latest publish version**.
## Demo Vue 2
[](https://codesandbox.io/s/n5qjp3oqv4)
## Demo Vue 3
[](https://codesandbox.io/s/broken-flower-22ot7m)
## Installation
```sh
$ yarn add vue-signature-pad
```
## Usage for Vue 2
```js
import Vue from 'vue';
import VueSignaturePad from 'vue-signature-pad';
Vue.use(VueSignaturePad);
```
```vue
Save
Undo
export default {
name: 'MySignaturePad',
methods: {
undo() {
this.$refs.signaturePad.undoSignature();
},
save() {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty);
console.log(data);
}
}
};
```
## Usage for Vue3
```js
import { createApp } from 'vue'
import App from './App.vue'
import { VueSignaturePad } from 'vue-signature-pad';
const app = createApp(App)
app.component("VueSignaturePad", VueSignaturePad);
app.mount('#app')
```
```vue
Save
Undo
import { defineComponent } from "vue";
export default defineComponent({
name: 'MySignaturePad',
methods: {
undo() {
this.$refs.signaturePad.undoSignature();
},
save() {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty);
console.log(data);
}
}
});
```
### In Single Component
```vue
Save
Undo
import { defineComponent } from "vue";
import { VueSignaturePad } from 'vue-signature-pad';
export default defineComponent({
name: 'MySignaturePad',
components: { VueSignaturePad },
methods: {
undo() {
this.$refs.signaturePad.undoSignature();
},
save() {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty);
console.log(data);
}
}
});
```
[vue-signature-pad](https://github.com/neighborhood999/vue-signature-pad) use [szimek/signature_pad](https://github.com/szimek/signature_pad) default setting as `options`, feel free custom you wanted options. In [v1.1](https://github.com/neighborhood999/vue-signature-pad/releases/tag/1.1.0) add `onBegin` and `onEnd` event callback:
```vue
export default {
methods: {
onBegin() {
console.log('=== Begin ===');
},
onEnd() {
console.log('=== End ===');
}
}
};
```
## Props
| Name | Type | Default | Description | Example |
|:------------------------|:--------|:--------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------|
| width | String | `100%` | Set the `div` width. | - |
| height | String | `100%` | Set the `div` height. | - |
| options | Object | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13) | Set the signature pad options. | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13) |
| images | Array | `[]` | Merge signature with the provide images. | `['A.png', 'B.png', 'C.png']` or `[{ src: 'A.png', x: 0, y: 0 }, { src: 'B.png', x: 0, y: 10 }, { src: 'C.png', x: 0, y: 20 }]` |
| customStyle | Object | `{}` | Custom `div` style. | `{ border: black 3px solid }` |
| scaleToDevicePixelRatio | Boolean | `true` | Scale the canvas up to match the [device pixel ratio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). | - |
## Methods
| Name | Argument Type | Description |
| :------------------------------------- | :--------------------------- | --------------------------------------------------------------------------- |
| `saveSignature(type, encoderOptions)` | `(String, Number)` | Will return target canvas **status** and **data**. |
| `undoSignature()` | - | Undo |
| `clearSignature()` | - | Clear |
| `mergeImageAndSignature(signature)` | `Object` or `String` | Provide `images` as props and will merge with signature. |
| `addImages(images)` | `Array` | Provide the images merge with signature. Reference above `images` property. |
| `lockSignaturePad()` | - | Lock target signature pad. |
| `openSignaturePad()` | - | Open target signature pad. |
| `getPropImagesAndCacheImages()` | - | Get all the images information. |
| `clearCacheImages()` | - | Clear cache images. |
| `fromDataURL(data, options, callback)` | `(String, Object, Callback)` | Draw image from data URL. |
| `fromData(data)` | `String` | Returns signature image as an array of point groups. |
| `toData()` | - | Draws signature image from an array of point groups. |
| `isEmpty()` | - | Return signature canvas have data. |
## Credits
[szimek/signature_pad](https://github.com/szimek/signature_pad) - HTML5 canvas based smooth signature drawing
## LICENSE
MIT © [Peng Jie](https://github.com/neighborhood999/)