Namespace, Primitive, Method

    vue-signature-pad

    3.0.1 • Public • Published

    Vue Signature Pad

    Build Status npm styled with prettier

    Vue component wrap for signature pad

    Note: If you are still using Vue 2, please install 2.0.4 version, for Vue 3 you can install the latest publish version.

    Demo

    Edit Vue 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

    Install

    npm i vue-signature-pad

    DownloadsWeekly Downloads

    16,401

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    38.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • neighborhood999