1、安装 vue-signature-pad
如果项目中用的是 vue2 的版本,那么安装 2.0.5版本:
npm install --save vue-signature-pad@2.0.5
如果项目中用的是 vue3 版本,那么安装最新的版本即可:
npm install --save vue-signature-pad
或者package.json直接引入下载,安装更新node包命令 npm i
"vue-signature-pad": "^2.0.5"
2、 main.js 中引用 vue-signature-pad
// 电子签名
import VueSignaturePad from "vue-signature-pad";
Vue.use(VueSignaturePad);
// elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3、简洁版实现代码如下:
<template>
<div>
<vue-signature-pad style="border: 1px solid #333;" ref="signaturePad" v-model="signature"></vue-signature-pad>
<button @click="undoSignature">撤销</button>
<button @click="clear">清除</button>
<button @click="save">保存</button>
</div>
</template>
<script>
export default {
data() {
return {
signature: null,
};
},
methods: {
// 撤销上一步
undoSignature() {
this.$nextTick(() => {
this.$refs.signaturePad.undoSignature();
});
},
// 清除
clear() {
this.$nextTick(() => {
this.$refs.signaturePad.clearSignature();
});
},
// 保存
save() {
this.$nextTick(() => {
const signatureData = this.$refs.signaturePad.saveSignature();
console.log(signatureData);
});
},
},
};
</script>
4、完整版实现代码如下:
<template>
<div class="handwritten-name-wrap">
<div class="img-wrap">
<img :src="imgSrc" alt="" v-if="imgSrc">
</div>
<div class="signWrap">
<vue-signature-pad style="border: 1px solid #333;" width="100%" height="100%" :options="options"
ref="signaturePad"></vue-signature-pad>
<footer>
<div class="gtnGroup">
<el-button type="primary" size="mini" @click="undo">撤销</el-button>
<el-button type="primary" size="mini" style="margin-left:20px" @click="clear">清屏</el-button>
<el-button type="primary" size="mini" style="margin-left:20px" @click="save">保存</el-button>
</div>
<div class="otherSet">
<div class="penTxt">笔刷大小:</div>
<div class="circleWrap" :class="{ active: isActive1 }" @click="selSize(1)"><b class="b1"></b></div>
<div class="circleWrap" :class="{ active: isActive2 }" @click="selSize(2)"><b class="b2"></b></div>
<div class="circleWrap" :class="{ active: isActive3 }" @click="selSize(3)"><b class="b3"></b></div>
</div>
</footer>
</div>
</div>
</template>
<script>
export default {
data() {
return {
panelVisible: false,
panelTitle: "",
options: {
penColor: "#000",
minWidth: 1, //控制画笔最小宽度
maxWidth: 1, //控制画笔最大宽度
},
isActive1: true,
isActive2: false,
isActive3: false,
imgSrc: "",
}
},
methods: {
//手写签名按钮的点击
handleClick() {
this.panelVisible = true;
this.isActive1 = true;
this.isActive2 = false;
this.isActive3 = false;
this.options = {
penColor: "#000",
minWidth: 1,
maxWidth: 1,
}
},
//撤销
undo() {
this.$refs.signaturePad.undoSignature();
},
//清除
clear() {
this.$refs.signaturePad.clearSignature();
},
//保存
save() {
console.log(this.$refs.signaturePad.saveSignature());
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
this.imgSrc = data;
this.panelVisible = false;
},
//调节画笔粗细大小
selSize(val) {
this.options = {
penColor: "#000",
minWidth: val,
maxWidth: val,
};
if (val == 1) {
this.isActive1 = true;
this.isActive2 = false;
this.isActive3 = false;
} else if (val == 2) {
this.isActive1 = false;
this.isActive2 = true;
this.isActive3 = false;
} else if (val == 3) {
this.isActive1 = false;
this.isActive2 = false;
this.isActive3 = true;
}
}
},
}
</script>
<style lang="scss">
.handwritten-name-wrap {
.img-wrap {
width: 100%;
height: 164px;
margin-top: 2px;
border: 1px solid #ccc;
img {
width: 70%;
height: 100%;
}
}
.signWrap {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.signName {
flex: 1;
border-top: 1px solid #ccc;
}
footer {
height: 40px;
border-top: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
.gtnGroup {
width: 50%;
margin-left: 20px;
}
.otherSet {
width: 50%;
display: flex;
align-items: center;
.penTxt {
width: 100px;
}
.selSize {
width: 70px;
}
.el-select__caret {
position: absolute;
right: -3px;
}
.b1,
.b2,
.b3 {
display: inline-block;
background: #000;
border-radius: 50%;
}
.circleWrap {
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
cursor: pointer;
margin-right: 20px;
}
.active {
border: 1px dashed #0074d9;
}
.b1 {
width: 4px;
height: 4px
}
.b2 {
width: 6px;
height: 6px
}
.b3 {
width: 8px;
height: 8px
}
}
}
}
}
.signNameModel {
.vxe-modal--content {
padding: 0 !important;
}
}
</style>
实现效果如下:
此插件还有两个内置的方法比较有用,就是 “锁定目标签名板” 和“打开目标签名板”,其实就是禁用签名和启用签名。项目中有些审批是需要走流程的,到某个节点的时候,某个人可能没有没有权限签名,只能查看签名,这时候这两个方法就排上用场了。以此篇博文为例,具体用应用方法如下:
this.$refs.signaturePad.lockSignaturePad(); //锁定目标签名板
this.$refs.signaturePad.openSignaturePad(); //打开目标签名板