FormCreateDialog 弹窗表单
刘泓宾
# FormCreateDialog 弹窗表单
将FormCreate表单封装成弹窗的形式，方便使用，属性差别不大。
# 基础用法
这里演示通过弹窗的方式打开表单
<template>
<div class="dk-demo-form-dialog">
<p>这里演示通过弹窗的方式打开表单</p>
<p><el-button type="primary" @click="() => $refs.fc.show()">打开表单</el-button></p>
<dk-form-create-dialog ref="fc" :form-data="formData" :isSubmit="false" @submit="submit"/>
</div>
</template>
<script>
export default {
data() {
return {
formData: null,
loading: true
}
},
mounted() {
this.form()
},
methods: {
form() {
setTimeout(() => {
// 模拟接口返回数据
var res = {
"code": 0,
"data": {
"title": "表单演示",
"action": "/demo/save",
"method": "POST",
"rules": [
{
"type": "input",
"field": "text",
"value": "",
"title": "输入框",
"effect": {"help": "这是一个帮助内容"},
"props": {"type": "text", "placeholder": "请输入内容"}
}
]
}
}
this.formData = res.data
this.loading = false
}, 500)
},
submit(formData, res) {
this.$alert("演示数据：" + JSON.stringify(formData), '提交成功', {
confirmButtonText: '确定'
});
}
}
}
</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
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
Expand Copy Copy
# 进阶用法
可以使用top(距离顶部高度)、width(宽度)
<template>
<div class="dk-demo-form-dialog">
<p>可以使用top(距离顶部高度)、width(宽度)</p>
<p><el-button type="primary" @click="() => $refs.fc.show()">打开表单</el-button></p>
<dk-form-create-dialog top="10px" width="400px" ref="fc" :form-data="formData" :isSubmit="false" @submit="submit"/>
</div>
</template>
<script>
export default {
data() {
return {
formData: null,
loading: true
}
},
mounted() {
this.form()
},
methods: {
form() {
setTimeout(() => {
// 模拟接口返回数据
var res = {
"code": 0,
"data": {
"title": "表单演示",
"action": "/demo/save",
"method": "POST",
"rules": [
{
"type": "input",
"field": "text",
"value": "",
"title": "输入框",
"effect": {"help": "这是一个帮助内容"},
"props": {"type": "text", "placeholder": "请输入内容"}
}
]
}
}
this.formData = res.data
this.loading = false
}, 500)
},
submit(formData, res) {
this.$alert("演示数据：" + JSON.stringify(formData), '提交成功', {
confirmButtonText: '确定'
});
}
}
}
</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
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
Expand Copy Copy
# 弹窗嵌套
如果有场景需要在弹窗中使用弹窗表单，可以添加append-to-body属性
嵌套弹窗
<template>
<div class="dk-demo-form-dialog">
<p>如果有场景需要在弹窗中使用弹窗表单，可以添加append-to-body属性</p>
<p><el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button></p>
<el-dialog append-to-body title="嵌套弹窗" :visible.sync="dialogVisible">
<p><el-button type="primary" @click="() => $refs.fc.show()">打开表单</el-button></p>
</el-dialog>
<dk-form-create-dialog append-to-body ref="fc" :form-data="formData" :isSubmit="false" @submit="submit"/>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
formData: null,
loading: true
}
},
mounted() {
this.form()
},
methods: {
form() {
setTimeout(() => {
// 模拟接口返回数据
var res = {
"code": 0,
"data": {
"title": "表单演示",
"action": "/demo/save",
"method": "POST",
"rules": [
{
"type": "input",
"field": "text",
"value": "",
"title": "输入框",
"effect": {"help": "这是一个帮助内容"},
"props": {"type": "text", "placeholder": "请输入内容"}
}
]
}
}
this.formData = res.data
this.loading = false
}, 500)
},
submit(formData, res) {
this.$alert("演示数据：" + JSON.stringify(formData), '提交成功', {
confirmButtonText: '确定'
});
}
}
}
</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
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
Expand Copy Copy
# 全屏弹窗
<template>
<div class="dk-demo-form-dialog">
<p><el-button type="primary" @click="() => $refs.fc.show()">打开表单</el-button></p>
<dk-form-create-dialog :fullscreen="true" ref="fc" :form-data="formData" :isSubmit="false" @submit="submit"/>
</div>
</template>
<script>
export default {
data() {
return {
formData: null,
loading: true
}
},
mounted() {
this.form()
},
methods: {
form() {
setTimeout(() => {
// 模拟接口返回数据
var res = {
"code": 0,
"data": {
"title": "表单演示",
"action": "/demo/save",
"method": "POST",
"rules": [
{
"type": "input",
"field": "text",
"value": "",
"title": "输入框",
"effect": {"help": "这是一个帮助内容"},
"props": {"type": "text", "placeholder": "请输入内容"}
}
]
}
}
this.formData = res.data
this.loading = false
}, 500)
},
submit(formData, res) {
this.$alert("演示数据：" + JSON.stringify(formData), '提交成功', {
confirmButtonText: '确定'
});
}
}
}
</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
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
Expand Copy Copy
# 属性 Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| formData | 绑定值 | object | — | — |
| isSubmit | 是否提交 | boolean | — | true |
| extraConfig | 额外配置 | object | — | — |
| path | 提交请求路径 | string | — | — |
| isLoading | 点击提交按钮后按钮是否 | boolean | — | false |
# 事件 Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| submit | 提交成功 | formData, res |
| fail | 提交失败 | formData, res |
# formData 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 表单标题 | string | — | — |
| action | 提交地址 | string | — | — |
| method | 提交方式 | string | — | POST |
| rules | JSON表单 | array | — | — |