vue封装独立组件：实现手写签名功能

目录

第一章 效果展示

第二章 准备工作

2.1 使用的工具vue-sign

2.1.1 安装

2.1.2 了解

2.1.3 参数说明

第三章 源代码

第一章 效果展示

第二章 准备工作

2.1 使用的工具vue-esign

2.1.1 安装

npm install vue-esign --save

2.1.2 了解

• 兼容pc端和移动端
• 有对应的参数让我们自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色
• 能支持裁剪，在画布设定尺寸基础上裁掉四周空白部分

2.1.3 参数说明

属性	类型	默认值	说明
width	Number	800	画布宽度，即导出图片的宽度
height	Number	300	画布高度，即导出图片的高度
lineWidth	Number	4	画笔粗细
lineColor	String	#000000	画笔颜色
bgColor	String	空	画布背景色，为空时画布背景透明， 支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red'
isCrop	Boolean	false	是否裁剪，在画布设定尺寸基础上裁掉四周空白部分

第三章 源代码

• 父组件

  
    

      
        

           点击签名
        
      
    
  



  



   


// 引入自定义封装的组件
import sign from './component/sign.vue'

signreVisible: false,
inputForm:{
    respondentSign = ''
}

// 被调查者签字图片，获取子组件传的值
setsignre (img) {
  this.inputForm.respondentSign = img
  this.signreVisible = false
},

• 子组件