vue-signature-pad在vue中实现电子签名
<vue-signature-pad
id="signature"
width="95%"
height="400px"
ref="signaturePad"
:options="options"
/>
<el-row>
<el-col :span="4">
<div class="grid-content bg-purple">
<el-button type="primary" plain @click="undo">撤销</el-button>
</div>
</el-col>
<el-col :span="4"
><div class="grid-content bg-purple-light">
<el-button type="success" plain @click="save">保存</el-button>
</div>
</el-col>
<el-col :span="4"
><div class="grid-content bg-purple">
<el-button type="warning" plain @click="change">换色</el-button>
</div>
</el-col>
<el-col :span="4"
><div class="grid-content bg-purple-light">
<el-button type="danger" plain @click="resume">重置</el-button>
</div>
</el-col>
<el-col :span="4"
><div class="grid-content">
<el-button type="danger" plain @click="close">关闭</el-button>
</div>
</el-col>
</el-row>
export default {
data() {
return {
editVisible: false,
mainTitle: "用户签名",
options: {
penColor: "#000",
},
};
},
methods: {
init(id) {
this.editVisible = true;
},
undo() {
this.$refs.signaturePad.undoSignature();
},
save() {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
alert("Open DevTools see the save data.");
console.log(isEmpty);
console.log(data);
},
//切换颜色
change() {
if (this.options.penColor == "#00f") {
this.options = {
penColor: "#c0f",
};
} else {
this.options = {
penColor: "#00f",
};
}
},
//清除重置
resume() {
this.$refs.signaturePad.clearSignature();
},
//关闭
close() {
this.editVisible = false;
},
},
};