amis2/docs/zh-CN/components/form/input-text.md
2022-06-20 21:15:17 +08:00

13 KiB
Executable File
Raw Blame History

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 stringAPI 动态选项组
autoComplete stringAPI 自动补全
multiple boolean 是否多选
delimiter string , 拼接符
labelField string "label" 选项标签字段
valueField string "value" 选项值字段
joinValues boolean true 拼接值
extractValue boolean false 提取值
addOn addOn 输入框附加组件,比如附带一个提示文字,或者附带一个提交按钮。
addOn.type string 请选择 textbutton 或者 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 }

事件表

当前组件会对外派发以下事件,可以通过onEvent来监听这些事件,并通过actions来配置执行的动作,在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据,详细请查看事件动作

事件名称 事件参数 说明
click event.data.value: string 输入值 点击输入框时触发,只针对选择器模式的输入框有效
enter event.data.value: string 输入值 回车时触发,只针对选择器模式的输入框有效
focus event.data.value: string 输入值 输入框获取焦点时触发
blur event.data.value: string 输入值 输入框失去焦点时触发
change event.data.value: string 输入值 值变化时触发

动作表

当前组件对外暴露以下特性动作,其他组件可以通过指定actionType: 动作名称componentId: 该组件id来触发这些动作,动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数,详细请查看事件动作

动作名称 动作配置 说明
clear - 清空
reset - 重置
focus - 获取焦点
reload - 刷新(重新加载),只针对配置了source的输入框有效
setValue value: string 更新的值 更新数据,开启multiple多选时用,分隔