vue+element如何添加签名效果
小编给大家分享一下vue+element如何添加签名效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
公司主营业务：网站设计、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出广德免费做网站回馈大家。
为了方便就把项目的文件叫作父组件，然后签名的那个组件叫作子组件
！ 如有不太明白的地方，多看看代码注释。为细节地方
1. 首先根据element ui 在父组件中设置好diglog弹框，并且在全局样式下，自定义样式
// 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;
}
2. 然后在父组件data中定义centerDialogVisibe=false，imgsrc=''
data（）{
return{
imgsrc: '', // base64编码，保存为图片用到
centerDialogVisible: false //dialog弹框显示 fales不显示，true显示
}
}3. 然后dialog弹框的样式写好之后，就该引入组件了，组件是在网上找的，原文地址如下
原文地址是组件下载地址，并没有过多介绍 download.csdn.net/download/we…
组件为单独组件，通过components引入即可使用，根据项目需求自行配置编写样式。当作子组件引入父组件中。
组件内容如下：
清空
保存
#clear,#save{
width:270px;
height:50px;
line-height:50px;
font-size:20px;
position:absolute;
}
#clear{
bottom:0;
}
#save{
bottom:0;
right:0;
}
4. 然后在父组件methods中写方法接收子组件传来的data
// 如上标签中加入的自定义方法
getSignImg (val) {
//val 是接收子组件的data的
this.imgsrc = val // 让签的名变成图片
this.centerDialogVisible = false
}子组件有中带有两个按钮，一个是清除，一个是确定，点击确定时，图片保存到原来需要的位置后，dialog应该关闭，所以加上了element ui 提供的
this.centerDialogVisible = false
就可以点击确定，关闭dialog弹框了
总结：
elemnet ui dailog弹框不要写入 标签内，要写在根元素中，不要被包裹，如下结构可参考
