mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
12 KiB
12 KiB
| title | description | type | group | menuName | icon | order |
|---|---|---|---|---|---|---|
| Radios 单选框 | 0 | null | Radios 单选框 | 36 |
用于实现单选。
基本用法
{
"type": "form",
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
列显示
设置 inline 可以纵向显示，用于显示列很多的情况
{
"type": "form",
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"inline": false,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
控制列显示的分裂
通过 columnsCount 来设置列显示的列数，比如下面例子是两列。
{
"type": "form",
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"inline": false,
"columnsCount": 2,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
默认选择第一个
通过 selectFirst 属性配置
{
"type": "form",
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"selectFirst": true,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
动态选项
可以配置 source 来从上下文或远程 api 拉取选项数据
{
"type": "page",
"body": {
"type": "form",
"data": {
"items": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
},
"body": [
{
"label": "选项",
"type": "radios",
"name": "radios",
"source": "${items}"
}
]
}
}
远程 api
{
"type": "page",
"body": {
"type": "form",
"body": [
{
"label": "选项",
"type": "radios",
"name": "radios",
"source": "/api/mock2/form/getOptions?waitSeconds=1"
}
]
}
}
api 返回内容需要包含 options 字段
{
"status": 0,
"msg": "",
"data": {
"value": "b", // 可选，如果返回就会自动选中 b 选项
// 必须用 options 作为选项组的 key 值
"options": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
}
}
属性表
当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| options | Array<object>或Array<string> |
选项组 | |
| source | string或 API |
动态选项组 | |
| labelField | string |
"label" |
选项标签字段 |
| valueField | string |
"value" |
选项值字段 |
| columnsCount | number |
1 |
选项按几列显示，默认为一列 |
| inline | boolean |
true |
是否显示为一行 |
| selectFirst | boolean |
false |
是否默认选中第一个 |
| autoFill | object |
自动填充 |
事件表
当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细请查看事件动作。
[name]表示当前组件绑定的名称，即name属性，如果没有配置name属性，则通过value取值。
| 事件名称 | 事件参数 | 说明 |
|---|---|---|
| change | [name]: string 组件的值selectedItems: Option 选中的项items: Option[] 选项集合 |
选中值变化时触发 |
change
{
"type": "form",
"debug": true,
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
],
"onEvent": {
"change": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "${event.data.value|json}"
}
}
]
}
}
}
]
}
动作表
当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。
| 动作名称 | 动作配置 | 说明 |
|---|---|---|
| clear | - | 清空 |
| reset | - | 将值重置为初始值。6.3.0 及以下版本为resetValue |
| reload | - | 重新加载，调用 source，刷新数据域数据刷新（重新加载） |
| setValue | value: string 更新的值 |
更新数据 |
clear
{
"type": "form",
"debug": true,
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
],
"value": "a",
"id": "clear_text"
},
{
"type": "button",
"label": "清空",
"onEvent": {
"click": {
"actions": [
{
"actionType": "clear",
"componentId": "clear_text"
}
]
}
}
}
]
}
reset
如果配置了resetValue，则重置时使用resetValue的值，否则使用初始值。
{
"type": "form",
"debug": true,
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
],
"value": "a",
"id": "reset_text"
},
{
"type": "button",
"label": "重置",
"onEvent": {
"click": {
"actions": [
{
"actionType": "reset",
"componentId": "reset_text"
}
]
}
}
}
]
}
reload
只有选择器模式支持，即配置source，用于重新加载选择器的数据源。
{
"type": "form",
"debug": true,
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"id": "reload_type",
"source": "/api/mock2/form/getOptions",
"value": "a"
},
{
"type": "button",
"label": "重新加载",
"onEvent": {
"click": {
"actions": [
{
"actionType": "reload",
"componentId": "reload_type"
}
]
}
}
}
]
}
setValue
{
"type": "form",
"debug": true,
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
],
"value": "a",
"id": "setvalue_text"
},
{
"type": "button",
"label": "赋值",
"onEvent": {
"click": {
"actions": [
{
"actionType": "setValue",
"componentId": "setvalue_text",
"args": {
"value": "b"
}
}
]
}
}
}
]
}