mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 12:08:13 +08:00
4acfbb99ce
* feat:优化事件数据域 * feat:优化事件数据域 * feat:优化事件数据域(option->item,options->items) * feat:优化事件数据域(version) * feat:优化事件数据域(修复弹窗事件多次触发&并行数据获取问题) * feat:优化事件数据域(删除多余代码) * feat:优化事件数据域(更新文档) * feat:优化事件数据域(更新文档) * feat:优化动作数据域 * feat:优化动作数据域
636 lines
15 KiB
JavaScript
636 lines
15 KiB
JavaScript
const change = name => ({
|
|
actions: [
|
|
{
|
|
actionType: 'toast',
|
|
args: {
|
|
msgType: 'info',
|
|
msg: `派发change事件\${${name}|json\}`
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
const add = {
|
|
actions: [
|
|
{
|
|
actionType: 'toast',
|
|
args: {
|
|
msgType: 'info',
|
|
msg: 'clear-select: ${clear-select|json},items: ${items|json}'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const edit = {
|
|
actions: [
|
|
{
|
|
actionType: 'toast',
|
|
args: {
|
|
msgType: 'info',
|
|
msg: 'clear-select: ${clear-select|json},items: ${items|json}'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const del = {
|
|
actions: [
|
|
{
|
|
actionType: 'toast',
|
|
args: {
|
|
msgType: 'info',
|
|
msg: 'clear-select: ${clear-select|json},items: ${items|json}'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const blur = {
|
|
actions: [
|
|
{
|
|
actionType: 'toast',
|
|
args: {
|
|
msgType: 'info',
|
|
msg: '派发blur事件'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const focus = {
|
|
actions: [
|
|
{
|
|
actionType: 'toast',
|
|
args: {
|
|
msgType: 'info',
|
|
msg: '派发focus事件'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const options = [
|
|
{
|
|
label: '选项A',
|
|
value: 'A'
|
|
},
|
|
{
|
|
label: '选项B',
|
|
value: 'B'
|
|
},
|
|
{
|
|
label: '选项C',
|
|
value: 'C'
|
|
}
|
|
];
|
|
|
|
export default {
|
|
type: 'page',
|
|
title: '下拉框组件事件',
|
|
regions: ['body', 'toolbar', 'header'],
|
|
body: [
|
|
{
|
|
type: 'tpl',
|
|
tpl: 'Select下拉框',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger1',
|
|
id: 'trigger1',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-select',
|
|
description: '点击清空指定下拉框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-select',
|
|
id: 'clear-select',
|
|
type: 'select',
|
|
label: 'clear动作测试',
|
|
mode: 'row',
|
|
value: 'A,B,C',
|
|
multiple: true,
|
|
checkAll: true,
|
|
creatable: true,
|
|
editable: true,
|
|
removable: true,
|
|
options,
|
|
onEvent: {
|
|
change: change('clear-select'),
|
|
blur,
|
|
focus,
|
|
add,
|
|
edit,
|
|
delete: del
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'tpl',
|
|
tpl: 'inputTag标签选择器',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger2',
|
|
id: 'trigger2',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-input-tag',
|
|
description: '点击清空指定下拉框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-input-tag',
|
|
id: 'clear-input-tag',
|
|
type: 'input-tag',
|
|
label: 'clear动作测试',
|
|
mode: 'row',
|
|
value: 'A,B',
|
|
multiple: true,
|
|
options,
|
|
onEvent: {
|
|
change: change('clear-input-tag'),
|
|
blur,
|
|
focus
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'tpl',
|
|
tpl: 'matrix-checkboxes矩阵勾选',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger3',
|
|
id: 'trigger3',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-matrix-checkboxes',
|
|
description: '点击清空指定下拉框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-matrix-checkboxes',
|
|
id: 'clear-matrix-checkboxes',
|
|
type: 'matrix-checkboxes',
|
|
rowLabel: '行标题说明',
|
|
columns: [
|
|
{
|
|
label: '列1'
|
|
},
|
|
{
|
|
label: '列2'
|
|
}
|
|
],
|
|
rows: [
|
|
{
|
|
label: '行1'
|
|
},
|
|
{
|
|
label: '行2'
|
|
}
|
|
],
|
|
onEvent: {
|
|
change: change('clear-matrix-checkboxes')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'tpl',
|
|
tpl: 'radios单选框',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger4',
|
|
id: 'trigger4',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-radios',
|
|
description: '点击清空指定下拉框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-radios',
|
|
id: 'clear-radios',
|
|
type: 'radios',
|
|
options,
|
|
onEvent: {
|
|
change: change('clear-radios')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'tpl',
|
|
tpl: 'nested-select嵌套下拉框',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger6',
|
|
id: 'trigger6',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-nested-select',
|
|
description: '点击清空指定嵌套下拉框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-nested-select',
|
|
id: 'clear-nested-select',
|
|
type: 'nested-select',
|
|
label: 'clear动作测试',
|
|
mode: 'row',
|
|
options: [
|
|
{
|
|
label: '选项A',
|
|
value: 'A',
|
|
children: []
|
|
},
|
|
{
|
|
label: '选项B',
|
|
value: 'B',
|
|
children: [
|
|
{
|
|
label: '选项C',
|
|
value: 'C'
|
|
},
|
|
{
|
|
label: '选项D',
|
|
value: 'D'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
multiple: false,
|
|
hideNodePathLabel: false,
|
|
onlyChildren: false,
|
|
joinValues: true,
|
|
delimiter: '。',
|
|
onEvent: {
|
|
change: change('clear-nested-select'),
|
|
blur,
|
|
focus
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'tpl',
|
|
tpl: 'chained-select级联下拉框',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger11',
|
|
id: 'trigger11',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-chained-select',
|
|
description: '点击清空指定级联下拉框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-chained-select',
|
|
id: 'clear-chained-select',
|
|
label: 'clear动作测试',
|
|
mode: 'row',
|
|
type: 'chained-select',
|
|
source:
|
|
'/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4',
|
|
value: 'a,b',
|
|
onEvent: {
|
|
change: change('clear-chained-select'),
|
|
blur,
|
|
focus
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'tpl',
|
|
tpl: 'input-city城市选择器',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger10',
|
|
id: 'trigger10',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-input-city',
|
|
description: '点击清空城市选择器选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-input-city',
|
|
id: 'clear-input-city',
|
|
type: 'input-city',
|
|
label: 'clear动作测试',
|
|
mode: 'row',
|
|
onEvent: {
|
|
change: change('clear-input-city')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'tpl',
|
|
tpl: '单选框/复选框',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger8',
|
|
id: 'trigger8',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-checkbox',
|
|
description: '点击清空指定单选框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-checkbox',
|
|
id: 'clear-checkbox',
|
|
type: 'checkbox',
|
|
label: 'clear动作测试',
|
|
mode: 'row',
|
|
option: '勾选框',
|
|
onEvent: {
|
|
change: change('clear-checkbox')
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger9',
|
|
id: 'trigger9',
|
|
type: 'action',
|
|
mode: 'row',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-checkboxes',
|
|
description: '点击清空指定浮选框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-checkboxes',
|
|
id: 'clear-checkboxes',
|
|
type: 'checkboxes',
|
|
mode: 'row',
|
|
label: 'clear动作测试',
|
|
options,
|
|
onEvent: {
|
|
change: change('clear-checkboxes')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'tpl',
|
|
tpl: 'options类',
|
|
inline: false,
|
|
wrapperComponent: 'h2'
|
|
},
|
|
{
|
|
type: 'form',
|
|
debug: true,
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger5',
|
|
id: 'trigger5',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-options_001',
|
|
description: '点击清空指定下拉框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-options_001',
|
|
id: 'clear-options_001',
|
|
type: 'button-group-select',
|
|
options,
|
|
onEvent: {
|
|
change: change('clear-options_001')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'group',
|
|
body: [
|
|
{
|
|
name: 'trigger5',
|
|
id: 'trigger5',
|
|
type: 'action',
|
|
label: 'clear触发器',
|
|
level: 'primary',
|
|
onEvent: {
|
|
click: {
|
|
actions: [
|
|
{
|
|
actionType: 'clear',
|
|
componentId: 'clear-options_002',
|
|
description: '点击清空指定下拉框选中值'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'clear-options_002',
|
|
id: 'clear-options_002',
|
|
type: 'list-select',
|
|
options,
|
|
onEvent: {
|
|
change: change('clear-options_002')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|