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

Vue.js+element加入签名效果(移动端可用)

发布于 2020-3-8|

复制链接

摘记: 下面介绍为了方便就把项目的文件叫作父组件，然后签名的那个组件叫作子组件！ 如有不太明白的地方，多看看代码注释。为细节地方1. 首先根据element ui 在父组件中设置好diglog弹框，并且在全局样式下，自定义样式

```javascript

// click绑定的方法是element提供的 centerDialogVisibe=true 是点击时弹框出现

// src = base64 ，下面介绍到

// div是在父组件中，所以有了下面子传给父数据

..

下面介绍为了方便就把项目的文件叫作父组件，然后签名的那个组件叫作子组件！ 如有不太明白的地方，多看看代码注释。为细节地方1. 首先根据element ui 在父组件中设置好diglog弹框，并且在全局样式下，自定义样式

```javascript

// 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=''

```javascript

data(){

return{

imgsrc: '', // base64编码，保存为图片用到

centerDialogVisible: false //dialog弹框显示 fales不显示，true显示

}

}

```