DialogForm弹窗表单
... 2022-3-18 Less than 1 minute
# DialogForm弹窗表单
Tips
2.9.0+
Tips
更多Form配置属性可以参考From组件文档
<el-button type="primary" @click="showDialog"> 弹窗表单</el-button>
<el-button type="primary" @click="showDialog('drawer')"> 抽屉表单</el-button>
<el-button type="success" @click="showDialog1"> 弹窗表单（带上数据）</el-button>
<script>
export default {
data() {
return {
option: {
submitText: '完成',
span:24,
column: [
{
label: "姓名",
prop: "name",
rules: [{
required: true,
message: "请输入姓名",
trigger: "blur"
}],
},
{
label: "年龄",
prop: "age"
}
]
},
form: {}
}
},
methods: {
showDialog(type) {
this.$DialogForm.show({
title: '弹窗页面',
width: '30%',
type:type,
menuPosition:'right',
option: this.option,
beforeClose: (done) => {
this.$message.success('关闭前方法')
done()
},
callback:(res)=>{
console.log(res.data);
this.$message.success('关闭等待框')
setTimeout(() => {
res.done()
setTimeout(() => {
this.$message.success('关闭弹窗')
res.close()
}, 1000)
}, 1000)
}
})
},
showDialog1() {
this.$DialogForm.show({
title: '弹窗页面（带上数据)',
width: '50%',
data: { name: 'small',age:18 },
option: this.option,
callback:(res)=>{
console.log(res.data);
this.$message.success('关闭等待框')
setTimeout(() => {
res.done()
setTimeout(() => {
this.$message.success('关闭弹窗')
res.close()
}, 1000)
}, 1000)
}
})
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
Expand Copy Copy