单行输入
#
适用场景用于输入单行的文字内容
#
基础能力说明#
绑定「文本」类型字段表单容器绑定数据模型后,模型中的文本字段会自动渲染为单行输入组件,实现单行数据的录入
#
输入值属性说明输入值属性表示组件的默认表单值,可绑定变量或表达式实现输入值的动态变更
#
校验规则配置- 支持配置配置正则表达式对用户输入数据进行检查校验
- 提供预置校验规则,可直接按需选用
#
常见场景实践说明#
属性介绍组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
绑定字段 | name | string | 基础属性 | "formInput" | 提交表单时会将组件值提交保存到所配置的字段中 |
字段标题 | label | string | 基础属性 | "标题" | 组件标题位置的显示内容 |
显示标题 | labelVisible | boolean | 基础属性 | true | 显示组件的标题 |
提示文字 | placeholder | string | 基础属性 | "请输入" | 用于说明组件用途或注意事项的提示文字 |
输入值 | value | string | 基础属性 | "" | 组件输入框中的默认值 |
必填 | required | boolean | 基础属性 | false | 启用后该组件强制必填,值不可为空 |
必填标识 | requiredFlag | boolean | 基础属性 | true | 启用后,组件若要求必填,则会显示必填星号标记 |
必填校验提示 | requiredMsg | string | 基础属性 | "该项为必填项" | 启用必填,但组件值为空时的提示信息 |
校验规则 | rules | array | 基础属性 | [] | 仅符合校验规则的数据才允许被提交;不符合规则时会展示错误提示信息 |
布局方式 | layout | {"label":"自动","value":""}|{"label":"水平","value":"horizontal"}|{"label":"垂直","value":"vertical"} | 基础属性 | "" | 设置当前组件的标题和输入选择区域为左右布局或上下布局,如选择“自动”,则跟随父级表单容器的配置 |
组件宽度(PC端) | size | {"label":"大","value":"l"}|{"label":"中","value":"m"}|{"label":"小","value":"s"}|{"label":"占满","value":"full"} | 基础属性 | "full" | - |
输入类型 | type | {"label":"文本输入键盘","value":"text"}|{"label":"数字输入键盘","value":"number"}|{"label":"身份证输入键盘","value":"idcard"}|{"label":"带小数点的数字键盘","value":"digit"} | 基础属性 | "text" | 移动端输入时的键盘类型 |
最大输入长度 | maxLength | number | 基础属性 | 140 | 允许输入的最大字符数量 |
密码 | password | boolean | 基础属性 | false | 启用后,输入框显示为暗文,适合于密码录入等场景 |
自动获取焦点 | focus | boolean | 基础属性 | false | 启用后,打开页面时,该组件的输入框将自动获取焦点(多组件启用时,仅最下方的组件生效) |
显示清空按钮 | clearable | boolean | 基础属性 | true | 启用后,输入框有值时,右侧将显示清空按钮,点击后可清空输入框中的值 |
禁用 | disabled | boolean | 基础属性 | false | 是否禁用输入/选择,启用后组件强制显示为只读效果 |
校验状态 | validateStatus | {"label":"success","value":"success"}|{"label":"warn","value":"warn"}|{"label":"error","value":"error"} | 基础属性 | "success" | - |
小程序端获取微信昵称 | isNickNameType | boolean | 基础属性 | false | 开启后小程序用户可选择直接填写微信昵称 |
#
事件介绍组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
值改变 | change | 兼容三端 | - | |
失去焦点 | blur | 兼容三端 | - | |
获取焦点 | focus | 兼容三端 | - | |
清空内容 | clear | 兼容三端 | - | |
确认内容 | confirm | 兼容三端 | - |