neighborhood999 / Vue Signature Pad
Licence: mit
🖋 Vue Signature Pad Component
Stars: ✭ 237
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Signature Pad
Nutui
京东风格的移动端 Vue2、Vue3 组件库 (A Vue.js UI Toolkit for Mobile Web)
Stars: ✭ 3,870 (+1532.91%)
Mutual labels: components, vue-components
Iview
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 23,930 (+9997.05%)
Mutual labels: components, vue-components
Coreui Vue
Over 90 Bootstrap based Vue.js components and directives. CoreUI React.js UI Components. CoreUI for Vue.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true Vue components, without jQuery and unneeded dependencies.
Stars: ✭ 318 (+34.18%)
Mutual labels: components, vue-components
okeedesign-mobile-vue
High Performance, Flexiable Configuration, Various Components
Stars: ✭ 139 (-41.35%)
Mutual labels: components, vue-components
Vue Form Components
Clean & minimal vue form elements and form builder with validation
Stars: ✭ 120 (-49.37%)
Mutual labels: components, vue-components
vue-mui
Mobile UI elements for Vue 2.0
Stars: ✭ 16 (-93.25%)
Mutual labels: components, vue-components
Vue Goodshare
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.
Stars: ✭ 345 (+45.57%)
Mutual labels: components, vue-components
Vux
Mobile UI Components based on Vue & WeUI
Stars: ✭ 17,573 (+7314.77%)
Mutual labels: components, vue-components
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-57.38%)
Mutual labels: components, vue-components
Semantic Ui Vue
Semantic UI integration for Vue
Stars: ✭ 914 (+285.65%)
Mutual labels: components, vue-components
Element
A Vue.js 2.0 UI Toolkit for Web
Stars: ✭ 51,416 (+21594.51%)
Mutual labels: components, vue-components
Vue Beauty
Beautiful UI components build with vue and ant design
Stars: ✭ 2,109 (+789.87%)
Mutual labels: components, vue-components
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+6.75%)
Mutual labels: components, vue-components
vuestic-ui
Free and Open Source UI Library for Vue 3 🤘
Stars: ✭ 1,501 (+533.33%)
Mutual labels: components, vue-components
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+196.2%)
Mutual labels: components, vue-components
Vueleaflet
Vue components for Leaflet maps
Stars: ✭ 177 (-25.32%)
Mutual labels: components, vue-components
Viewui
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 2,487 (+949.37%)
Mutual labels: components, vue-components
Vue Lazy Render
A vue component for lazy rending vue component
Stars: ✭ 219 (-7.59%)
Mutual labels: vue-components
Vue 2 3
↔️ Interop Vue 2 components in Vue 3 apps and vice versa
Stars: ✭ 231 (-2.53%)
Mutual labels: components
Vue Diagrams
Diagram component for vue.js, inspired by react-diagrams
Stars: ✭ 218 (-8.02%)
Mutual labels: vue-components
Vue Signature Pad
Vue component wrap for signature pad
Demo
Installation
$ yarn add vue-signature-pad
Usage
import Vue from 'vue';
import VueSignaturePad from 'vue-signature-pad';
Vue.use(VueSignaturePad);
<template>
<div id="app">
<VueSignaturePad width="500px" height="500px" ref="signaturePad" />
<div>
<button @click="save">Save</button>
<button @click="undo">Undo</button>
</div>
</div>
</template>
<script>
export default {
name: 'MySignaturePad',
methods: {
undo() {
this.$refs.signaturePad.undoSignature();
},
save() {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty);
console.log(data);
}
}
};
</script>
vue-signature-pad use szimek/signature_pad default setting as options
, feel free custom you wanted options. In v1.1 add onBegin
and onEnd
event callback:
<template>
<div id="app">
<VueSignaturePad
width="500px"
height="500px"
ref="signaturePad"
:options="{ onBegin, onEnd }"
/>
</div>
</template>
<script>
export default {
methods: {
onBegin() {
console.log('=== Begin ===');
},
onEnd() {
console.log('=== End ===');
}
}
};
</script>
Props
Name | Type | Default | Description | Example |
---|---|---|---|---|
width | String | 100% |
Set the div width. |
- |
height | String | 100% |
Set the div height. |
- |
options | Object | Reference | Set the signature pad options. | Reference |
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 } |
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 - HTML5 canvas based smooth signature drawing
LICENSE
MIT © Peng Jie
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].