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

width:270px;
height:50px;
line-height:50px;
font-size:20px;
position:absolute;
}
#clear{
bottom:0;
}
#save{
bottom:0;
right:0;
}
</style>

4. 然后在父组件methods中写方法接收子组件传来的data

// 如上标签中加入的自定义方法
getSignImg (val) {
   //val 是接收子组件的data的
   this.imgsrc = val // 让签的名变成图片
   this.centerDialogVisible = false
  }

子组件有中带有两个按钮，一个是清除，一个是确定，点击确定时，图片保存到原来需要的位置后，dialog应该关闭，所以加上了element ui 提供的

this.centerDialogVisible = false 

就可以点击确定，关闭dialog弹框了

总结：

elemnet ui dailog弹框不要写入 标签内，要写在根元素中，不要被包裹，如下结构可参考

</el-col>
     </el-row>
      <el-dialog
      title="签名"
      :visible.sync="centerDialogVisible"
      width="85%"
      center>
      <sign @draw_save="getSignImg"></sign>
     </el-dialog>
    </div>

想要点击某个元素出现dialog弹框时，就给某个元素加上element提供的点击事件（），然后dialog中的定义（:visible.sync）也必须一致

在没有引入组件之前，是在父组件中写js代码，因为dialog弹框出现时，弹框里面的dom才会加载，js会立即执行，用了其提供的open方法也不是很理想，js代码总会比dom先执行一步，我也放在定时器中让js缓慢执行，然后清除定时器又成了问题，所以就放弃了这种写法，改为组件引入。

如果某个元素绑定了element提供的点击事件之后，想又得绑定一个点击事件，那么把提供的方法写在自己的方法中

<div class="canva" @click="isShow">
methods：{
  isShow（）{
    this.centerDialogVisible = true
    //...
  }
}

想要改变canvas宽高，画线粗细，画线颜色，画线背景，一定在子组件内props中更改，自定义改会出问题，canvas描线会模糊，有锯齿

父组件想要子组件中的data，就利用子传父，$emit ,父组件得用子组件的data，保存为图片，子组件就得传出去

然后以上就总结完毕，搜了好多文章，并没有详细的介绍签名效果，有的是需要引入插件，有的是需要写js，有的更是要充某币购买，很是麻烦，然后再这里写上这篇文章，是为了帮助更多的人，也许公司项目刚好也做这个效果呢，这些都有可能。不过还好下载的组件没花钱，花钱买了，怪怪的，免费最好。