mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 01:11:15 +08:00
c11e63e0f1
Co-authored-by: 吴多益 <wuduoyi@baidu.com>
12 KiB
Executable File
12 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
InputText 输入框 | 0 | null | InputText 输入框 | 56 |
基本使用
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "text",
"type": "input-text",
"label": "text"
}
]
}
不同类型
配置type
可以支持不同格式的文本输入框
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "text",
"type": "input-text",
"label": "text"
},
{
"type": "divider"
},
{
"type": "input-url",
"name": "url",
"label": "链接"
},
{
"type": "divider"
},
{
"type": "input-email",
"name": "email",
"label": "邮箱"
},
{
"type": "divider"
},
{
"type": "input-password",
"name": "password",
"label": "密码"
}
]
}
附加组件
可以配置addOn
,附带附加组件,比如 button,还能设置 icon。
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "text",
"type": "input-text",
"label": "text",
"addOn": {
"type": "button",
"icon": "https://suda.cdn.bcebos.com/images%2F2021-01%2Fsearch.svg",
"label": "搜索"
}
}
]
}
可清除
通过 "clearable": true
可以设置文本可清除
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "text",
"type": "input-text",
"label": "text",
"clearable": true
}
]
}
选择器模式
配置options
即可支持选择器模式。
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "text",
"type": "input-text",
"label": "text",
"options": [
{
"label": "aa",
"value": "aa"
},
{
"label": "bb",
"value": "bb"
},
{
"label": "cc",
"value": "cc"
},
{
"label": "dd",
"value": "dd"
}
]
}
]
}
选择器模式下,支持部分选择器组件支持的配置项,具体请查看下面的属性表。如:source 和 autoComplete 都支持
限制只能选择预设
配置 options 并且配置 creatable: false
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "text",
"type": "input-text",
"label": "text",
"creatable": false,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
多选模式
配置 multiple: true
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"name": "text",
"type": "input-text",
"label": "text",
"multiple": true,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
前缀和后缀
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"data": {
"unit": "MB"
},
"body": [
{
"name": "text",
"type": "input-text",
"label": "text",
"prefix": "¥",
"suffix": "RMB"
},
{
"name": "prefix",
"type": "input-text",
"label": "text",
"prefix": "¥"
},
{
"name": "suffix",
"type": "input-text",
"label": "text",
"suffix": "${unit}"
}
]
}
支持数据映射
显示计数器
{
"type": "form",
"body": [
{
"name": "a",
"type": "input-text",
"label": "A",
"showCounter": true,
"placeholder": "请输入"
},
{
"name": "b",
"type": "input-text",
"label": "B",
"showCounter": true,
"maxLength": 100,
"placeholder": "请输入"
}
]
}
自动转换值
可以配置 transform,来自动转换值,支持转小写或大写。
注意下面第一个示例,只有输入的内容才会触发 transform,下拉框选中的值是不会处理的。
{
"type": "form",
"debug": true,
"body": [
{
"name": "lower",
"type": "input-text",
"label": "转换小写",
"placeholder": "输入的英文自动转为小写",
"transform": {
"lowerCase": true
},
"multiple": true,
"options": ["APPLE", "ORANGE", "WATERMELON"],
},
{
"name": "upper",
"type": "input-text",
"label": "转换大写",
"placeholder": "输入的英文自动转为大写",
"transform": {
"upperCase": true
}
}
]
}
属性表
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
options | Array<object> 或Array<string> |
选项组 | |
source | string 或 API |
动态选项组 | |
autoComplete | string 或 API |
自动补全 | |
multiple | boolean |
是否多选 | |
delimiter | string |
, |
拼接符 |
labelField | string |
"label" |
选项标签字段 |
valueField | string |
"value" |
选项值字段 |
joinValues | boolean |
true |
拼接值 |
extractValue | boolean |
false |
提取值 |
addOn | addOn |
输入框附加组件,比如附带一个提示文字,或者附带一个提交按钮。 | |
addOn.type | string |
请选择 text 、button 或者 submit 。 |
|
addOn.label | string |
文字说明 | |
addOn.position | 'left' | 'right' |
'right' |
addOn 位置 |
addOn.xxx | string |
其他参数请参考按钮文档 | |
trimContents | boolean |
是否去除首尾空白文本。 | |
creatable | boolean |
是否可以创建,默认为可以,除非设置为 false 即只能选择选项中的值 | |
clearable | boolean |
是否可清除 | |
resetValue | string |
"" |
清除后设置此配置项给定的值。 |
prefix | string |
"" |
前缀 |
suffix | string |
"" |
后缀 |
showCounter | boolean |
是否显示计数器 | |
minLength | number |
限制最小字数 | |
maxLength | number |
限制最大字数 | |
transform | object |
自动转换值,可选 transform: { lowerCase: true, upperCase: true } |
事件表
事件名称 | 事件参数 | 说明 |
---|---|---|
click | value: string |
点击 |
focus | value: string |
获取焦点 |
blur | value: string |
失去焦点 |
enter | value: string |
回车 |
change | value: string |
值变化 |
动作表
动作名称 | 动作配置 | 说明 |
---|---|---|
clear | - | 清空 |
reset | - | 重置 |
focus | - | 获取焦点 |
reload | - | 刷新(重新加载),只针对配置了source 的输入框有效 |
setValue | value: string 更新的值 |
更新数据,开启multiple 多选时用, 分隔 |