Broken after last update

Vue Signature Pad

Vue component wrap for 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

Demo Vue 3

Installation

$ yarn add vue-signature-pad

Usage for Vue 2

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>

Usage for Vue3

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')

<template>
  <div id="app">
    <VueSignaturePad ref="signaturePad" />
    <div>
      <button @click="save">Save</button>
      <button @click="undo">Undo</button>
    </div>
  </div>
</template>
<script>
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);
    }
  }
});
</script>

In Single Component

<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>
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);
    }
  }
});
</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 }`
scaleToDevicePixelRatio	Boolean	`true`	Scale the canvas up to match the device pixel ratio.	-

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

neighborhood999 / vue-signature-pad Goto Github PK

vue-signature-pad's Introduction

Vue Signature Pad

Demo Vue 2

Demo Vue 3

Installation

Usage for Vue 2

Usage for Vue3

In Single Component

Props

Methods

Credits

LICENSE

vue-signature-pad's People

Contributors

Stargazers

Watchers

Forkers

vue-signature-pad's Issues

The devDependency vue-template-compiler was updated from 2.5.17 to 2.5.18.

Includes everything in 2.5.18-beta.0

Bug Fixes

The devDependency eslint-plugin-vue was updated from 5.2.2 to 5.2.3.

The dependency vue was updated from 2.5.17 to 2.5.18.

Includes everything in 2.5.18-beta.0

Bug Fixes

There have been updates to the babel7 monorepo:

The devDependency rollup was updated from 1.9.2 to 1.9.3.

Bug Fixes

Pull Requests

Version 10 of Node.js (code name Dubnium) has been released! 🎊

Recommend Projects

Recommend Topics

Recommend Org

The devDependency vue-template-compiler was updated from `2.5.17` to `2.5.18`.

The devDependency eslint-plugin-vue was updated from `5.2.2` to `5.2.3`.

The dependency vue was updated from `2.5.17` to `2.5.18`.

The devDependency rollup was updated from `1.9.2` to `1.9.3`.