# button
# Schema类静态属性
Schema类静态属性请访问 Schema.js类静态属性 及 值逻辑与事件逻辑关系
{
widget: 'button',
title: '按钮',
preview: '',
logic: {
value: null,
event: ['click']
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# schema.option定义
schema完整定义请访问schema
{
"text": "提交", // 按钮文本
"type": "primary", // 按钮类型：primary、dashed、text、default
"icon": "", // 按钮图标
"long": false, // 是否通栏
"ghost": false, // 是否幽灵按钮，
"shape": "", // 形状，可选 'square': 方角；'circle': 圆角
"script": "" // 自定义脚本，可直接调用window及ctx对象。
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
关于script中ctx：
ctx.$render: 为当前new Render()实例，例如可通过ctx.$render.store.getFormData()获取表单值。关于$render可以访问renderctx.$el: 为widget渲染的的真实节点ctx.store: 等同ctx.$render.store，关于store可以访问storectx.state: 该对象定义当前widget内部对外暴露的，且可通过ctx.setState()更改的状态ctx.setState: 更改ctx.state内定义的widget状态，当前按钮内部状态只有loadingctx.instance: 指向当前渲染widget实例，针对基于vue的widget则指向当前vue实例。
注意:
如果需要在移动端或其他渲染库进行渲染，不建议用ctx.instance。
# 示例展示
# 静态按钮展示
- schema
{
"key": "kLyMMi1A8",
"widget": "button",
"hidden": false,
"option": {
"text": "primary button",
"type": "primary",
"icon": "",
"long": false,
"ghost": false,
"shape": "square"
},
"disabled": false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 自定义脚本展示
- 提交按钮脚本
ctx.setState({loading: true})
setTimeout(function(){
ctx.$render.validateFields().then(function(){
var form = ctx.store.getFormData()
alert(JSON.stringify(form, null, 2))
ctx.setState({loading: false})
}).catch(function(){
ctx.setState({loading: false})
})
}, 1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- 完整schema
{
"key": "kuEXemrCZ",
"widget": "grid",
"hidden": false,
"option": {
"gutter": 0,
"align": "top",
"justify": "start"
},
"label": {
"width": 80,
"position": "right",
"colon": false
},
"container": true,
"children": [
{
"span": 24,
"list": [
{
"key": "kGZLjx5Vx",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"name": "dept",
"type": "string",
"label": "部门",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": true,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请选择...",
"default": ""
},
{
"key": "kHfg7rKbP",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"name": "email",
"type": "string",
"label": "邮箱",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": true,
"message": "必填",
"type": "string",
"trigger": "blur"
},
{
"message": "邮箱格式不正确",
"type": "email"
}
],
"placeholder": "请输入",
"default": ""
},
{
"key": "kXGPKYWHH",
"widget": "grid",
"hidden": false,
"option": {
"gutter": 10,
"align": "top",
"justify": "center"
},
"label": "布局",
"container": true,
"children": [
{
"span": 4,
"list": [
{
"key": "k4pvII4Ay",
"widget": "button",
"hidden": false,
"option": {
"text": "提交",
"type": "primary",
"icon": "",
"long": true,
"ghost": false,
"shape": "square",
"script": "ctx.setState({loading: true})\n\nsetTimeout(function(){\n\n ctx.$render.validateFields().then(function(){\n var form = ctx.store.getFormData()\n alert(JSON.stringify(form, null, 2))\n ctx.setState({loading: false})\n }).catch(function(){\n ctx.setState({loading: false})\n })\n\n}, 1000)"
},
"disabled": false
}
]
},
{
"span": 4,
"list": [
{
"key": "k1VvCWXfh",
"widget": "button",
"hidden": false,
"option": {
"text": "重置",
"type": "default",
"icon": "",
"long": true,
"ghost": false,
"shape": "square",
"script": "ctx.$render.resetFields()"
},
"disabled": false
}
]
}
]
}
]
}
],
"title": "",
"description": "",
"size": "default",
"logics": [],
"style": {
"margin-right": "auto",
"margin-left": "auto",
"max-width": "1600px",
"min-width": "500px"
}
}
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143