vue-signatureboard

一个基于sign-canvas二次开发的签名板，加入的特性有绘制了签名板的样式在PC端是弹出框，在移动端是全屏横着（点击确定时canvas处理成正的）。用了边缘检测即导出的图片为比名字稍大点的png透明base64。支持国际化。

sign-canvas作者信息：更多文章和技术推文，请关注微信公众号"笔优站长",有问题也可以及时反馈哦！

sign-canvas npm地址：https://www.npmjs.com/package/sign-canvas，仓库地址：https://github.com/langyuxiansheng/vue-sign-canvas

下载

npm i -S vue-signatureboard

更新

@1.1.7 css调整 @1.1.6 写死手机端后同时样式进行强行变更 @1.1.5 加入写死为手机端配置 @1.1.4 按钮间距修改，x的icon背景变成白色 @1.1.3 手机旋转是按钮样式修正 @1.1.2 没想到手机还会旋转！！！，针对手机旋转的情况再写一套css，js在点击时获取是否手机旋转了。如果旋转输出正向图片，未旋转输出倒置图片。 @1.1.1 样式微调 @1.1.0 更改文字间距和按钮间距 @1.0.9 由于签字板阻止默认事件和冒泡，显隐改为直接出现而不是渐变出现 @1.0.8 解决某些手机文字不倒转问题 @1.0.7 关闭按钮修改

全局引入

import sign from 'vue-signatureboard'; import 'vue-signatureboard/lib/vue-signatureboard.css'; // 1.0.5版本及以后不用 Vue.use(sign);

局部引入

import sign from 'vue-signatureboard'; import 'vue-signatureboard/lib/vue-signatureboard.css';// 1.0.5版本及以后不用

components: { sign, }

使用

<sign @confirm="getImage" :is-en="true">

methods: { getImage(base64Img){ console.log(base64Img); } }

API

属性	说明	类型	默认值	版本
confirm	绘制成功后的回调函数，获取的是base64图片	Function	无
is-en	国际化配置，英文true，中文false	Boolean	false
scale	绘制完成后图片比例，例如需要0.5倍大小的签名，:scale=0.5	Number	0.5
useMobile	使用手机端,当值为''时是PC端，不为''时为Mobile端	String	''	1.1.6

加入refs后的API

函数	说明	用法
show	显示或隐藏签名板,默认隐藏（1.0.6以后）	this.$refs.pf.show()

其他API请参照sign-canvas