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)

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>

总结

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