WInput 组件

A2UI Protocol JSON Schema

输入框组件，基于 WinDesignNext WInput 封装，支持用户输入、数据绑定和事件响应。

基础用法

Props API

属性名	类型	默认值	说明
id	string	-	组件唯一标识（必填）
component	string	WInput	组件类型（必填）
type	string	text	输入类型
size	string	''	输入框尺寸
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
placeholder	string	''	占位文本
clearable	boolean	false	是否可清空
showPassword	boolean	false	是否显示密码切换
showWordLimit	boolean	false	是否显示字数统计
maxlength	number	-	最大输入长度
minlength	number	-	最小输入长度
rows	number	2	文本域行数（textarea 时）
autosize	boolean	false	是否自适应高度（textarea）
resize	string	none	是否可缩放（textarea）
autofocus	boolean	false	是否自动聚焦
autocomplete	string	off	自动补全
tabindex	number	0	Tab 键顺序
validateEvent	boolean	true	是否触发表单校验
modelValue	object	-	绑定值（A2UI v0.9 数据绑定，支持 path）
action	object	-	A2UI v0.9 事件定义

path 支持说明

通用绑定格式见 path 数据绑定速查。

属性	支持 path	说明
modelValue	✅	双向绑定输入值（字符串）
action.event.context[].value	✅	事件上下文可引用 dataModel
action.event.api.constParams[].value	✅	API 固定参数可引用 dataModel
placeholder / disabled / type 等	❌	静态配置；动态变更请用 updateProp

绑定示例：

{
  "modelValue": { "path": "/username" },
  "action": {
    "event": {
      "name": "onInput",
      "context": [{ "key": "value", "value": { "path": "/username" } }]
    }
  }
}

modelValue 数据绑定

modelValue 用于将输入值绑定到 dataModel：

{
  "modelValue": { "path": "/username" }
}

当用户输入时，组件会自动将新值同步到 dataModel 的指定路径。

action 定义

{
  "action": {
    "event": {
      "name": "onInput",
      "context": [{ "key": "value", "value": { "literalString": "输入的值" } }]
    }
  }
}

输入时触发，context 中的 value 为当前输入内容。

---

使用示例

基础输入框

{
  "id": "input_001",
  "component": "WInput",
  "type": "text",
  "placeholder": "请输入",
  "modelValue": { "path": "/name" },
  "action": {
    "event": { "name": "onNameInput" }
  }
}

配合 WForm 使用

[
  {
    "id": "form_item_name",
    "component": "WFormItem",
    "label": "姓名",
    "children": ["input_name"]
  },
  {
    "id": "input_name",
    "component": "WInput",
    "modelValue": { "path": "/name" },
    "action": {
      "event": {
        "name": "onNameInput",
        "context": [{ "key": "value", "value": { "path": "/name" } }]
      }
    }
  }
]

---

事件处理

输入事件

用户输入时自动触发，context 携带当前输入值：

processor.onEvent((event) => {
  const eventName = event.message.userAction?.name;
  const context = event.message.userAction?.context;

  if (eventName === 'onNameInput') {
    // context: { value: "用户输入的值" }
    console.log('输入值:', context);
    event.resolve([]);
  }
});

数据同步

WInput 在输入时会自动将值同步到 dataModel：

1. 用户输入 → 更新本地值
2. 通过 setData(component, modelValue.path, val, surfaceId) 同步到 dataModel
3. 发送 action.event 事件
4. 其他组件（如 WButton）可通过 path 读取最新值

// WButton 提交时读取 WInput 的最新值
{
  "action": {
    "event": {
      "name": "onSubmit",
      "context": [{ "key": "name", "value": { "path": "/name" } }]
    }
  }
}