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

前端  /  管理员 发布于 5年前   641

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

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

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引入即可使用，根据项目需求自行配置编写样式。当作子组件引入父组件中。

组件内容如下：

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

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

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

this.centerDialogVisible = false


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

总结：

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

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

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

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

methods：{  isShow（）{    this.centerDialogVisible = true    //...  }}

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

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

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

总结

以上所述是小编给大家介绍的vue+element加入签名效果（移动端可用）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• 详解Vue、element-ui、axios实现省市区三级联动
• 详解vue-cli+element-ui树形表格(多级表格折腾小计)
• vue elementUI table表格数据 滚动懒加载的实现方法
• 详解vue-element Tree树形控件填坑路
• vuedraggable+element ui实现页面控件拖拽排序效果
• VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
• VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法