基于vue实现电子签名组件

1.安装依赖

npm intsall vue-esign -s

2.在main.js中引入组件

import vueEsign from 'vue-esign'

3.封装组件

<!--
 * @Author: 贝贝小菜鸟
 * @Date: 2021-02-02 
 * @LastEditTime: 2021-02-02
 * @LastEditors: Please set LastEditors
 * @Description: 电子签名
 * @FilePath: 
-->
<template>
  <div id="esign">
      <div class="topButton">
        <van-button :icon="require('../styles/images/mobile/clean.png')" color="#a89185" round @click="handleRest">清除</van-button>
      </div>
      <vue-esign ref="esign"
       :width="width"
       :height="height" 
       :isCrop="isCrop"
       :lineWidth="lineWidth"
       :lineColor="lineColor"
       :bgColor.sync ="bgColor"
       class="canvasColor"
      />
    <div class="buttomBotton">
      <van-button color="#aaaaaa" @click="goBack()" class="marginRight10">返回</van-button>
      <van-button type="warning" @click="handleGenerate">确认</van-button>
    </div>
  </div>
</template> 
 
<script lang="ts">
import {Vue,Component,Prop,Emit,Watch} from 'vue-property-decorator'
import { Toast } from 'vant'
 
@Component
export default class esign extends Vue{
  //父组件传递进来的值
  @Prop() width!:number;
  @Prop() height!:number;
  @Prop({default:false}) isCrop!:boolean;
  @Prop({default:6}) lineWidth!:number;
  @Prop({default:"#000000"}) lineColor!:string;
  @Prop({default:""}) bgColor?:string;
  //生成base64图片
  private resultImg: string =''
  //可视宽度
  private screenWidth:number =document.body.clientWidth
  //判断横竖屏
  private screenHW:string|number = window.orientation
  //横竖屏
  private isScreen:boolean = false
 
  @Emit("goBack")
  private goBack(){
    return this.resultImg
  }
  
  //清空功能
  handleRest():void{
    (this.$refs.esign as any).reset()
    Toast({
      message:"清空成功",
      type:"success"
    })
  }
  //生成图片
  handleGenerate(){
    (this.$refs.esign as any).generate().then((res:any)=>{
      this.resultImg = res
     Toast({
        message:"确认签字成功",
        type:"success"
      })
    }).catch((err:any)=>{
      Toast(err)
    })
  }
  mounted(){
    //监听手机如果旋转,重置宽高
    window.addEventListener("orientationchange",()=>{
     if(window.orientation===0){
       this.height =((document.documentElement.clientWidth||document.body.clientWidth) -90) as number
       this.width =((document.documentElement.clientHeight||document.body.clientHeight) -90) as number
     }else if(window.orientation===90){
       this.height =((document.documentElement.clientWidth||document.body.clientWidth) -90) as number
       this.width =((document.documentElement.clientHeight||document.body.clientHeight) -90) as number
     }
    },false)
  }
}
</script>
 
<style style="scss" scoped>
#esign{
  margin:45px;
  border-radius:20px;
}
 
.marginRight10{
  margin-right:20px
}
 
.topButton{
  position:fixed;
  left:0px;
  top:0px;
}
 
.buttomBotton{
  position:fixed;
  right:0px;
  bottom:0px;
}
 
.van-icon__image{
  transform: rotate(-90deg);
}
 
.canvasColor{
  border-radius:20px;
}
</style>

组件使用

<template>
	<div id="ElectronicSignature">
		<Esign 
			:width="esign.width"
			:height="esign.height"
			:isCrop="esign.isCrop"
			:lineWidth="esign.lineWidth"
			:lineColor="esign.lineColor"
			:bgColor="esign.bgColor"
			@goBack="goBack"
		/>
	</div>
</template>
<script lang="ts">
import {Component,Vue} from "vue-property-decorator"
import Esign from "./esign.vue"

interface IParams{
	[propName:string]:string|boolean|number;
}

@Component({
	components:{
		Esign
	}
})
export dafault class ElectronicSignature extends Vue{
	private esign:IParams = {
		width:((document.documentElement.clientWidth
		||document.body.clientWidth)-90) as number,
		height:((document.documentElement.clientHeight
		||document.body.clientHeight)-90) as number,
		isCrop:false,
		lineWidth:6,
		lineColor:"#000000",
		bgColor:"white"
	}
	//根据自己需要处理返回事件
    goBack(imgPath:string){
    
    }
}
</script>

<style lang="scss" scoped>
#ElectronicSignature{
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background-color:#eee;
}
</style>