跳到主要内容

单行输入

适用场景#

用于输入单行的文字内容

基础能力说明#

绑定「文本」类型字段#

表单容器绑定数据模型后,模型中的文本字段会自动渲染为单行输入组件,实现单行数据的录入

输入值属性说明#

输入值属性表示组件的默认表单值,可绑定变量或表达式实现输入值的动态变更

校验规则配置#

  1. 支持配置配置正则表达式对用户输入数据进行检查校验
  2. 提供预置校验规则,可直接按需选用

常见场景实践说明#

  1. 在表单中对用户输入数据进行计算展示 查阅文档
  2. 实现通过变量获取和改变表单值 查阅文档
  3. 清空表单内容 查阅文档
  4. 表单组件隐藏时,提交对应表单数据 查阅文档
  5. 利用表单组件搭建列表的筛选或搜索功能 查阅文档

属性介绍#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
绑定字段namestring基础属性"formInput"提交表单时会将组件值提交保存到所配置的字段中
字段标题labelstring基础属性"标题"组件标题位置的显示内容
显示标题labelVisibleboolean基础属性true显示组件的标题
提示文字placeholderstring基础属性"请输入"用于说明组件用途或注意事项的提示文字
输入值valuestring基础属性""组件输入框中的默认值
必填requiredboolean基础属性false启用后该组件强制必填,值不可为空
必填标识requiredFlagboolean基础属性true启用后,组件若要求必填,则会显示必填星号标记
必填校验提示requiredMsgstring基础属性"该项为必填项"启用必填,但组件值为空时的提示信息
校验规则rulesarray基础属性[]仅符合校验规则的数据才允许被提交;不符合规则时会展示错误提示信息
布局方式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"移动端输入时的键盘类型
最大输入长度maxLengthnumber基础属性140允许输入的最大字符数量
密码passwordboolean基础属性false启用后,输入框显示为暗文,适合于密码录入等场景
自动获取焦点focusboolean基础属性false启用后,打开页面时,该组件的输入框将自动获取焦点(多组件启用时,仅最下方的组件生效)
显示清空按钮clearableboolean基础属性true启用后,输入框有值时,右侧将显示清空按钮,点击后可清空输入框中的值
禁用disabledboolean基础属性false是否禁用输入/选择,启用后组件强制显示为只读效果
校验状态validateStatus{"label":"success","value":"success"}|{"label":"warn","value":"warn"}|{"label":"error","value":"error"}基础属性"success"-
小程序端获取微信昵称isNickNameTypeboolean基础属性false开启后小程序用户可选择直接填写微信昵称

事件介绍#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
值改变change兼容三端-
失去焦点blur兼容三端-
获取焦点focus兼容三端-
清空内容clear兼容三端-
确认内容confirm兼容三端-