当前位置:网站首页>简易签名组件zm-sign

简易签名组件zm-sign

2020-11-22 21:48:53 sangtian152

zm-sign

介绍

一个简易签名组件,基于vue和canvas。

安装

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

引入

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">清空</Button>
    <Button @click="done">完成</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("画布已清空")
        },
        handleDone(data){
          console.log(data)
        }
      }
    }
</script>

Attributes

参数 说明 类型 可选值 默认值
line-color 签名颜色 String #000000
line-width 线条宽度 Number 3
canvas-width 画布宽度 Number
canvas-height 画布高度 Number
bg-color 画布背景色 String #f7f7f7
img-bg-color 生成图片背景色 String tranparent
erasable 是否启用橡皮擦 Boolean true
eraser-radius 橡皮擦半径 Number 6
crop 是否裁剪图片 Boolean true
footer 是否显示底部 Boolean false
before-done 签名完成前调用,如果返回false会阻止默认签名完成事件 Function canvas

Events

事件名 说明 返回值
orientationchange 移动设备旋转事件 orientation
on-clear 清空画布事件
on-done 完成签名事件,返回签名生成的图片 data:image/png;base64

Methods

事件名 说明 返回值
clear 清空画布
done 完成签名

最新版本

NPM version

文档

说明文档.

版权声明
本文为[sangtian152]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4770037/blog/4733373

随机推荐