vue-esign签字
当需要客户手写签字的时候,一款手写插件就显得尤为重要。用起来越趁手越丝滑,越好。
插件特点
vue-esign兼容 PC 和 Mobile;
画布自适应屏幕大小变化(窗口缩放、屏幕旋转时画布无需重置,自动校正坐标偏移);
自定义画布尺寸(导出图尺寸),画笔粗细、颜色,画布背景色;
支持裁剪 (针对需求:有的签字需要裁剪掉四周空白)。
导出图片格式为 base64 ;
使用
1.安装
yarn add vue-esign
2.main.js全局配置
import vueEsign from 'vue-esign';
Vue.use(vueEsign)
3.页面使用
<template>
<div class="sign-name">
<div class="content">
<vue-esign
ref="esign"
:isCrop="isCrop"
:lineWidth="lineWidth"
:lineColor="lineColor"
:bgColor.sync="bgColor"
/>
<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">生成图片</button>
<img :src="resultImg">
</div>
</div>
</template>
<script>
import vueEsign from 'vue-esign'
export default {
components:{
vueEsign
},
data() {
return {
lineWidth: 6,
lineColor: "#000000",
bgColor: "#06c",
resultImg: "",
isCrop: false,
};
},
methods: {
handleReset() {
this.$refs.esign.reset();
},
handleGenerate() {
this.$refs.esign
.generate()
.then((res) => {
this.resultImg = res;
})
.catch((err) => {
alert(err); // 画布没有签字时会执行这里 'Not Signned'
});
},
},
};
</script>
<style scoped>
img{
width: 100%;
height: auto;
}
</style>
版本备注:
工具:@vue/cli
"vue": "^2.5.2",
"vue-esign": "^1.0.5",