java调用zm插件_简易签名组件zm-sign

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

ref="sign"

line-color="#409EFF"

:line-width="4"

:canvas-width="692"

:canvas-height="350"

:footer="false"

@on-clear="handleClear"

@on-done="handleDone"

>

清空

完成

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)

}

}

}

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

完成签名

—

最新版本

文档

说明文档.