欢迎来到[自学php网] ①群 287460651

主页 > 前端 > vue教程 >

vue+element加入签名效果(移动端可用)

来源:自学PHP网    时间:2019-07-23 15:24 作者:小飞侠

[导读] vue+element加入签名效果(移动端可用)...

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

// 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网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com