公司项目新需求要增加客户触摸屏签字确认功能,网上找了vue-signature-pad和vue-esign 对比下 决定用vue-signature-pad 因为他带笔压!就类似数位板画画的压感 画笔线条不是固定粗细的
我这贫乏的语言组织能力 还是看对比图吧
使用方法:
1.下载依赖
项目是3.0的 一开始还担心不能用 亲测安装最新版本是可以用地~
npm install --save vue-signature-pad
2.main.js里引入 use一下
import Vue from 'vue'
import VueSignaturePad from "vue-signature-pad";
Vue.use(VueSignaturePad);
3.使用
<el-row :gutter="24" type="flex" justify="center" style="height: 350px;">
<div style="width:780px;">
<vue-signature-pad class="signature" width="95%" height="300px" ref="signaturePad" :options="options"/>
</div>
<el-col>
<el-button class="signature-btn" @click="undoOperation">撤销</el-button>
<el-button class="signature-btn" @click="reset">重置</el-button>
</el-col>
</el-row>
methods
// 撤销
undoOperation() {
this.$refs.signaturePad.undoSignature();
},
// 重置
reset() {
this.$refs.signaturePad.clearSignature();
},
// 确定按纽
confirm() {
let { isEmpty, base64 } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty); // 签名是否为空
console.log(base64); // 签名的base64
},
css
.signature {
border: 1px solid #424242;
}
.signature-btn {
width: 100px;
height: 40px;
font-size: 20px;
color: #5e5e5e;
}
签名生成的base64转图片
他还能设置画笔粗细和颜色 我这里没有用到