vue-signature-simple

Vue-Signature-Simple is a lightweight Vue.js component designed to provide users with an easy and intuitive electronic signature functionality.

Usage

install

# npm
npm install vue-signature-simple
# yarn
yarn add vue-signature-simple

component

<template>
    <vue-signature-simple
          ref="vss"
          :width="width"
          :height="height"
          :stroke-size="strokeSize"
          :stroke-color="strokeColor"
          @change="getSignature"
      />
</template>

<script setup>
import { ref, useTemplateRef } from 'vue';
import VueSignatureSimple from 'vue-signature-simple'
const width = ref(340);
const height = ref(150);
const strokeSize = ref(2);
const strokeColor = ref('#4b5cc4');
const signature = ref('');
const vssRef = useTemplateRef('vss');

function getSignature (base64) {
  signature.value = base64
}
function isEmpty () {
  if (vssRef.value.isEmpty()) {
    alert('There is no signature content in the image')
  } else {
    alert('The image contains signature content')
  }
}
</script>

API

Props

name	description	default
width	signature width	300
height	signature height	100
strokeColor	pen color	black
strokeSize	pen size	2

Methods

name	description	params
clear	clear canvas
getSignature	get signature base64 data	format: (image/png)(image/jpeg)(image/svg+xml)
isEmpty	return canvas is empty?

License

MIT