🧬 组装组件
文本输入组件是一个用户界面元素,允许用户输入和编辑表单或输入字段的文本。
属性 | 描述 |
---|---|
默认值 | 组件的初始值。 您可以在 {{}} 中输入JavaScript 动态更改初始值。 |
占位符 | 当输入字段为空时,值将显示。 |
标签 | 显示给用户的字段名称 |
标题 | 详细描述字段的标题 |
隐藏标签 | 设置是否显示标签 |
位置 | 设置标签相对于组件的位置 |
对齐 | 设置标签的对齐(对齐到左或右) |
Width | 当标签位于组件左侧时,设置标签的宽度。 |
事件处理程序 | 响应组件事件触发查询、控制组件或调用其他API。 |
已禁用 | 控制组件是否被禁用的状态。 当组件被禁用时,它不能被修改或聚焦。 |
只读 | 控制组件是否为只读状态. 一个只读组件可以被选择和集中,但不能被修改。 |
显示清除按钮 | 控制是否在输入字段中显示清除按钮 |
显示字符数 | 控制是否显示输入的字符计数 |
前缀文本 | 输入字段左边出现的短文本,常用来为用户提供额外的上下文或指令 |
后缀文本 | 输入字段右边的短文本,常用来向用户提供额外信息或反馈 |
工具提示 | 用户可以在此输入组件工具提示。 工具提示将在其焦点时显示。 支持Markdown 格式。 |
必填字段 | 只有当开启开关时才有效。 |
图案 | 指定用户输入必须匹配的正则表达式模式才能被认为有效 |
最大长度 | 设置可以输入输入字段的最大字符数。 |
最小长度 | 指定用户必须输入输入输入字段才能被视为有效的字符的最少数。 |
自定义规则 | 在此创建您的验证逻辑。 规则应该在 JavaScript 中制定,并且由 {{}} 涵盖。 |
隐藏验证消息 | 当输入值不正确时,您可以通过切换隐藏状态来隐藏错误消息。 您可以用JavaScript动态地更改隐藏状态。 |
表单数据键 | 在构建数据属性时指定包装表单组件的键值。 |
Hidden | 动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。 |
主题颜色 | 允许用户指定按钮的背景颜色和不透明度 |
您可以使用其他组件来控制组件。 我们支持以下两种方法:
要设置输入值,例如 {{‘value1’}}
属性 | 描述 |
---|---|
值 | Input value |
清除选中组件的值
当调用焦点方法时, 输入字段将被高亮显示并准备好用户开始键入,而不需要用户点击输入字段。
示例用法:
输入组件支持使用内置事件系统监听其他组件的onChange
事件。 通过跟随这些示例步骤设置它:
Input
组件作为事件的目标。SetValue
动作并选择输入组件的适当值。 这将是输入组件的值,并将在事件触发时更新。一旦您设置了事件触发器,在其他组件触发onChange”事件时,输入组件将自动更新。 这允许您创建实时响应用户输入的动态接口 让用户更容易浏览和与您的应用程序交互。
事件 | 描述 |
---|---|
更改 | 当用户更改选中的输入值 |
聚焦点 | 当用户在输入组件上移动鼠标光标 |
Blur | 当用户完成输入值并退出关注连铸组件时 |
组件有一些常用的数据,可以通过应用程序中的 {{componentName.propertyName}}
调用。
属性名称 | 描述 |
---|---|
值 | 用户输入值 |
颜色方案 | 按钮的背景颜色 |
已禁用 | 一个布尔值表示禁用状态 |
显示名称 | 此组件的名称 (e 按钮1) |
formDataKey | 输入的表格数据键 |
hidden | 隐藏状态 (true 或 false) |
标签 | 标签值 |
标签对齐 | 输入标签对齐(左或右) |
标签位置 | 输入标签的位置(左或右) |
标签宽度 | 代表标签宽度的整数。 |
最大长度 | 最大长度的值 |
最小长度 | 最小长度的值 |
占位符 | 占位符值 |
prefixText | 文本前缀的值 |
后缀文本 | 文本后缀的值 |
只读 | 一个布尔值表示输入的准备状态。 |
必填 | 一个布尔值表示输入的必填状态。 |
正则表达式 | 输入的正则表达式 |
显示字符数 | 一个布尔值表示输入的字符数是否显示 |
工具提示文本 | 工具提示文本的值 |
示例: {{input1.value}}
下面是一些自定义输入组件的示例。