vue 实现电子签名（关于vue-esign插件的使用）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在写一个校园类的系统时，有需求使用电子签名的功能，参考了很多不错的案例（文章后面有分享），所以就有了以下文章。

---

一、效果如下

（跟参考链接长得差不多，其实大多都是这样，样式可自行修改）

二、使用步骤

1.引入库

代码如下（示例）：

//使用npm或者yarn 加载vue-esign 的插件依赖
npm方式：  npm install vue-esign --save
yarn方式： yarn add vue-esign

//在main.js中全局引入插件：
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
1
2
3
4
5
6
7

2.读入数据

代码如下（示例）：

<template>
 <a-col :span="24">
 	<a-form-model-item label="电子签名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="signaturePicture">
 		<img :src="imgurl" class="show-img" v-if="imgurl != ''" mode="widthFix" />
 		<a-button type="danger" @click="handleReset" v-if="imgurl != ''&&formDisabled!=true">重新签名</a-button>
 		<div class="qianming-container"  v-show="reset" >
 		 <!--v-show="reset",用来判断是不是需要签名的，如果你不需要用，可以去掉判断条件-->
            <a-button>请在下方书写电子签名</a-button>
            <vue-esign style="border:1px solid #ddd;height:200px;" ref="esign" :isCrop="isCrop" :width="600" :height="200" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor"></vue-esign>
            <div class="contro-container">
               <a-button type="danger" @click="handleReset">重新签名</a-button>
               <a-button type="primary" @click="handleGenerate">确定签名</a-button>
             </div>
       </div>
    </a-form-model-item>
  </a-col>
  <a-card class="box-card" :bordered="false" size="small">
  <!-- <div class="text item">
            <img :src="signaturePicture" class="show-img" v-if="signaturePicture != ''" mode="widthFix" />
            <div class="show-info" v-else>请在下方书写电子签名</div>
            <a-button type="danger" style="margin-left:10px;" v-if="signaturePicture != ''" @click="handleReset">重新签名</a-button>
          </div>-->
          <!-- <div class="qianming-container"  v-show="reset" >
            <vue-esign style="border:1px solid #ddd;height:200px;" ref="esign"  :isCrop="isCrop" :width="400" :height="400" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" ></vue-esign>
            <div class="contro-container">
              <a-button type="danger"  @click="handleReset">重新签名</a-button>
              <a-button type="primary" @click="handleGenerate">确定签名</a-button>
            </div>
          </div>-->
	</a-card>    
</template>      
<script> 
	import { httpAction, getAction } from '@/api/manage'
	import { validateDuplicateValue } from '@/utils/util'
    export default {
        name:'你的名字',
        data(){
            return {
             model: {},
		      labelCol: {
		        xs: { span: 24 },
		        sm: { span: 5 }
		      },
		      wrapperCol: {
		        xs: { span: 24 },
		        sm: { span: 16 }
		      },
		      confirmLoading: false,
		      validatorRules: {},
               lineWidth: 6,//画笔粗细
		       lineColor: '#000000',//画笔颜色
		       bgColor: '', //画布背景色，为空时画布背景透明
		       imgurl: '',//签名生成的图片
		       isCrop: false,//是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
		       reset: true //清空画布的状态
            }
        },
        methods:{
        //记录获取当前连接的后台地址：window._CONFIG['domianURL']
           //清空画板..
		    handleReset() {
		      this.$refs.esign.reset()
		      this.imgurl = ''
		      this.reset = true
		    },
		    //生成签名图片..
		    handleGenerate() {
		      this.$refs.esign
		        .generate()
		        .then(res => {
		          this.imgurl = res
		          this.model.signaturePicture = res
		          this.reset = false
		        })
		        .catch(err => {
		          this.$message.error('请签名之后提交！')
		        })
		    },
		    //将base64转换为文件..
		    dataURLtoFile(dataurl, filename) {
		      var arr = dataurl.split(','),
		        mime = arr[0].match(/:(.*?);/)[1],
		        bstr = atob(arr[1]),
		        n = bstr.length,
		        u8arr = new Uint8Array(n)
		      while (n--) {
		        u8arr[n] = bstr.charCodeAt(n)
		      }
		      return new File([u8arr], filename, { type: mime })
		    }
        }
    }
</script> 
<style scoped>
	.show-img {
		width: 30%;
	}
	.show-info {
		width: 100%;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.contro-container {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		position: absolute;
		bottom: 0px;
	}
	.qianming-container {
		width: 100%;
		height: 250px;
		margin: 20px auto;
		position: relative;
	}
	.text {
		font-size: 14px;
	}
	.item {
	 	margin-bottom: 18px;
	}
	.clearfix:before,.clearfix:after {
		display: table;
		content: '';
	}
	.clearfix:after {
		clear: both;
	}
	.box-card {
		width: 95%;
		margin-left: 2.5%;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

总结

用于自用的笔记记录，写的可能有些乱，希望能帮到你。
以下是参考链接 参考一，参考二，参考三