当前位置:网站首页>Simple signature component ZM sign

Simple signature component ZM sign

2020-11-22 21:48:53 sangtian152

zm-sign

Introduce

A simple signature component , be based on vue and canvas.

install

npm install zm-sign --save
# or 
yarn add zm-sign

introduce

import Vue from 'vue';
import ZmSign from 'zm-sign';
import "zm-sign/lib/zm-sign.css";

Vue.use(ZmSign);

<template>
  <div style="height: 420px; text-align:center;">
    <zm-sign
     ref="sign"
     line-color="#409EFF"
     :line-width="4"
     :canvas-width="692"
     :canvas-height="350"
     :footer="false"
     @on-clear="handleClear"
     @on-done="handleDone"
    ></zm-sign>
    <Button @click="clear"> Empty </Button>
    <Button @click="done"> complete </Button>
  </div>
</template>
<script>
    export default {
      methods:{
        async done(){
          let res = await this.$refs.sign.done();
          console.log(res)
        },
        clear(){
          console.log("clear", this.$refs.sign)
          this.$refs.sign.clear();
        },
        handleClear(){
          this.$Message.success(" The canvas is empty ")
        },
        handleDone(data){
          console.log(data)
        }
      }
    }
</script>

Attributes

Parameters explain type Optional value The default value is
line-color Signature color String #000000
line-width Line width Number 3
canvas-width Canvas width Number
canvas-height Canvas height Number
bg-color Canvas background color String #f7f7f7
img-bg-color Generate image background color String tranparent
erasable Whether to use eraser or not Boolean true
eraser-radius Eraser radius Number 6
crop Do you want to cut the picture Boolean true
footer Whether to show the bottom Boolean false
before-done Call before completion of signature , If you return false Will prevent the default signature completion event Function canvas

Events

Event name explain Return value
orientationchange Mobile device rotation event orientation
on-clear Empty canvas event
on-done Complete the signature event , Return the signature generated image data:image/png;base64

Methods

Event name explain Return value
clear Empty the canvas
done Complete the signature

The latest version

NPM version

file

documentation .

版权声明
本文为[sangtian152]所创,转载请带上原文链接,感谢

随机推荐