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

// click绑定的方法是element提供的 centerDialogVisibe=true 是点击时弹框出现
       // src = base64 ，下面介绍到

// div是在父组件中，所以有了下面子传给父数据
// 然后设置dialog弹框基本样式
// title为弹框中头部出现的名字
// visible.sync 为click绑定的方法一样
// width为整个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;
}centerDialogVisibe=false，imgsrc=''
data（）{
  return{
    imgsrc: '', // base64编码，保存为图片用到
    centerDialogVisible: false //dialog弹框显示 fales不显示，true显示
  }
}
原文地址是组件下载地址，并没有过多介绍燿ownload.csdn.net/download/we…





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

总结：

     
      
      
     
    

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

methods：{
  isShow（）{
    this.centerDialogVisible = true
    //...
  }
}
父组件想要子组件中的data，就利用子传父，$emit ,父组件得用子组件的data，保存为图片，子组件就得传出去总结

以上所述是小编给大家介绍的vue+element加入签名效果（移动端可用）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对自学php网网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！