vue-esign实现签字功能

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",