vue+element加入签名效果（移动端可用）

下面介绍为了方便就把项目的文件叫作父组件，然后签名的那个组件叫作子组件

！ 如有不太明白的地方，多看看代码注释。为细节地方

1. 首先根据element ui 在父组件中设置好diglog弹框，并且在全局样式下，自定义样式

<div class="canva" @click="centerDialogVisible = true">
// click绑定的方法是element提供的 centerDialogVisibe=true 是点击时弹框出现
      <img :src="imgsrc" alt=""/> // src = base64 ，下面介绍到
</div>
// div是在父组件中，所以有了下面子传给父数据
// 然后设置dialog弹框基本样式
// title为弹框中头部出现的名字
// visible.sync 为click绑定的方法一样
// width为整个dialog的宽度
// <sign></sign>是签名组件,绑定的方法是自定义方法，子传父，后面会详细介绍
<el-dialog
      title="签名"
      :visible.sync="centerDialogVisible"
      width="85%"
      center>
      <sign @draw_save="getSignImg"></sign>
</el-dialog>
//然后在全局样式下自定义弹框中默认的内容高度
.el-dialog {
  .el-dialog__header{
    height: 20px;
  }
  .el-dialog__body{
    height: 400px;
    overflow: auto; // 项目中其他dialog需要滚动条，所以加上就会出现滚动条。签名可忽略
  }
}
.el-dialog__wrapper .el-dialog__title{
  font-size: 21px;
}

2. 然后在父组件data中定义

centerDialogVisibe=false，imgsrc=''

data（）{
  return{
    imgsrc: '', // base64编码，保存为图片用到
    centerDialogVisible: false //dialog弹框显示 fales不显示，true显示
  }
}

3. 然后dialog弹框的样式写好之后，就该引入组件了，组件是在网上找的，原文地址如下

原文地址是组件下载地址，并没有过多介绍 download.csdn.net/download/we…

组件为单独组件，通过

components

组件内容如下：

<template>
 <div class="sign">
  <canvas id="canvas" :width="width" :height="height"></canvas>
  <div>
   <button type="button" @click="clear" id="clear">清空</button>
   <button type="button" @click="save" id="save">保存</button>
  </div>
 </div>
</template>
<script>
/*
 * width  canvas 宽度
 * height canvas 高度
 * strokeStyle 线条颜色
 * showUrl  是否显示预览图片
 * imgWidth img 宽度
 * imgHeight img 高度								 
 1/4    1 2 3 4 下一页 尾页