A2UI 输入框 Input

通过 Schema 配置生成 XInput 输入框组件。

字段配置

{
  "name": "username",
  "label": "用户名",
  "type": "input",
  "props": {
    "placeholder": "请输入用户名",
    "clearable": true,
    "maxlength": 50,
    "showWordLimit": true
  },
  "rules": [
    { "type": "required", "message": "用户名必填" }
  ]
}

Props 配置

属性	类型	默认值	说明
placeholder	string	-	占位文本
clearable	boolean	false	可清空
disabled	boolean	false	禁用状态
maxlength	number	-	最大输入长度
showWordLimit	boolean	false	显示字数统计
prefixIcon	string	-	前缀图标
suffixIcon	string	-	后缀图标
type	string	'text'	输入类型（text/password等）

校验规则

"rules": [
  { "type": "required", "message": "必填" },
  { "type": "min", "value": 2, "message": "最少2个字符" },
  { "type": "max", "value": 20, "message": "最多20个字符" },
  { "type": "pattern", "value": "^[a-zA-Z]+$", "message": "仅支持英文字母" }
]

示例

基础输入框

{ "name": "name", "label": "姓名", "type": "input" }

密码输入框

{ "name": "password", "label": "密码", "type": "input", "props": { "type": "password", "showPassword": true } }

带校验的输入框

{
  "name": "email",
  "label": "邮箱",
  "type": "input",
  "props": { "placeholder": "请输入邮箱地址" },
  "rules": [
    { "type": "required", "message": "邮箱必填" },
    { "type": "pattern", "value": "^\\S+@\\S+\\.\\S+$", "message": "请输入有效的邮箱格式" }
  ]
}

渲染组件

A2UI Input 字段会渲染为 XTO UI 的 XInput 组件：

<XInput
  v-model="formData.username"
  placeholder="请输入用户名"
  clearable
/>

相关链接

• XInput 组件文档 - XTO UI 输入框详细说明
• A2UI 表单 - 表单整体配置