V1.0.0
WinDesign A2UI Vue

WButton 组件 ​

按钮组件，基于 WinDesignNext WButton 封装，支持点击事件响应。

基础用法 ​

点击后禁用按钮 ​

点击按钮后，可以通过返回 updateComponents 消息将按钮设置为禁用状态：

关键代码说明 ​

typescript
// 返回 updateComponents 消息更新按钮属性
event.resolve([
  {
    version: 'v0.9',
    updateComponents: {
      surfaceId: 'demo-disable',
      components: [
        {
          id: event.message.userAction.sourceComponentId, // 动态获取组件 ID
          component: 'WButton',
          disabled: true, // 设置禁用
          // ...其他属性
        },
      ],
    },
  },
]);

使用 actions 本地操作 ​

通过 action.event.actions 配置，按钮点击时直接在前端执行操作，不需要注册事件监听，不需要调 API。

关键代码说明 ​

json
// 清空按钮：updateData 清空数据模型路径
{
  "id": "btn_clear",
  "component": "WButton",
  "action": {
    "event": {
      "name": "clearInput",
      "actions": [
        { "type": "updateData", "path": "/patientName", "value": "" }
      ]
    }
  }
}

// 锁定按钮：updateProp 禁用组件 + updateData 更新状态文字
{
  "id": "btn_disable",
  "component": "WButton",
  "action": {
    "event": {
      "name": "disableInput",
      "actions": [
        { "type": "updateProp", "componentId": "input_name", "prop": "disabled", "value": true },
        { "type": "updateData", "path": "/status", "value": "已锁定" }
      ]
    }
  }
}

Props API ​

属性名类型默认值说明
idstring-组件唯一标识（必填）
componentstringWButton组件类型（必填）
typestring''按钮类型
sizestring''按钮尺寸
disabledbooleanfalse是否禁用
loadingbooleanfalse是否加载中
plainbooleanfalse是否朴素样式
roundbooleanfalse是否圆角
circlebooleanfalse是否圆形
childstring-子组件 ID（按钮内容）
actionobject-A2UI v0.9 事件定义

path 支持说明 ​

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

WButton 自身属性不支持 path 绑定，但 action 中广泛使用 path 引用 dataModel：

位置支持 path说明
action.event.context[].value✅点击时将 dataModel 值带入事件上下文
action.event.api.constParams[].value✅API 请求的固定参数引用 dataModel
action.event.actions[].path✅updateData 操作的目标 dataModel 路径
type / disabled / loading 等❌静态配置；动态变更请用 updateProp

context 引用表单数据示例：

json
{
  "action": {
    "event": {
      "name": "onSubmit",
      "context": [
        { "key": "patientName", "value": { "path": "/patientName" } },
        { "key": "quantity", "value": { "path": "/quantity" } }
      ]
    }
  }
}

action 定义 ​

json
{
  "action": {
    "event": {
      "name": "onClick",
      "context": [{ "key": "data", "value": { "literalString": "value" } }]
    }
  }
}

actions 本地操作 ​

在 action.event 中配置 actions 数组，可以在按钮点击时直接在前端执行操作，不需要调用后端 API，不需要注册事件监听。

支持两种操作类型：

type说明必填字段
updateData更新数据模型path、value
updateProp更新组件属性componentId、prop、value

每个 action 还支持可选的 surfaceId 字段，用于跨 Surface 操作。不填则默认操作触发事件所在的 Surface：

json
{
  "type": "updateProp",
  "surfaceId": "other-surface",
  "componentId": "btn_submit",
  "prop": "disabled",
  "value": true
}

示例：清空输入框

点击按钮时清空绑定了 /formData/name 路径的输入框：

json
{
  "id": "btn_clear",
  "component": "WButton",
  "type": "primary",
  "child": "btn_clear_text",
  "action": {
    "event": {
      "name": "clearInput",
      "actions": [
        { "type": "updateData", "path": "/formData/name", "value": "" }
      ]
    }
  }
}

示例：点击后禁用按钮并显示"已提交"

json
{
  "id": "btn_submit",
  "component": "WButton",
  "type": "primary",
  "child": "btn_submit_text",
  "action": {
    "event": {
      "name": "onSubmit",
      "actions": [
        { "type": "updateProp", "componentId": "btn_submit", "prop": "disabled", "value": true },
        { "type": "updateData", "path": "/btnLabel", "value": "已提交" }
      ]
    }
  }
}

actions 是同步执行的，按数组顺序依次执行。可以和 api 同时配置——先执行本地操作，再调 API。也可以单独使用 actions 不配 api。

使用示例 ​

基础用法 ​

json
{
  "id": "button_001",
  "component": "WButton",
  "type": "primary",
  "child": "button_text_001",
  "action": {
    "event": { "name": "submitForm" }
  }
}

事件处理 ​

当按钮被点击时，触发 action.event.name 事件：

typescript
// 监听事件
processor.onEvent((event) => {
  const eventName = event.message.userAction?.name;

  if (eventName === 'submitForm') {
    // 处理提交逻辑
    event.resolve([
      { version: 'v0.9', updateComponents: { ... } }
    ]);
  }
});

配合 WForm 表单校验/重置 ​

WForm 会自动注册实例到 processor，通过 processor.getFormInstance(formId) 可获取表单实例，在外部事件处理中自行调用校验/重置方法：

typescript
// 监听按钮点击事件
processor.onEvent(async (event) => {
  const eventName = event.message.userAction?.name;

  if (eventName === 'onSubmit') {
    // 获取表单实例（formId 为 WForm 的 id）
    const formInstance = processor.getFormInstance('form_001');

    if (formInstance) {
      // 校验表单
      const valid = await formInstance.validate();
      if (!valid) {
        // 校验失败，不继续处理
        event.resolve([]);
        return;
      }
    }

    // 校验通过，继续处理提交逻辑
    // ...
    event.resolve([]);
  }

  if (eventName === 'onReset') {
    // 获取表单实例并重置
    const formInstance = processor.getFormInstance('form_001');
    if (formInstance) {
      formInstance.resetFields();
    }
    event.resolve([]);
  }
});

完整的表单验证配置请参考 WForm 表单验证。

Design by UED