V1.0.0
WinDesign A2UI Vue

WColorPicker 组件 ​

颜色选择器组件，基于 WinDesignNext ColorPicker 封装，用于选择颜色值，支持 modelValue 数据绑定和 action 事件响应。

基础用法 ​

API ​

属性类型默认值说明
componentstringWColorPicker组件类型（必填）
modelValueDataBindingValue-选中颜色，支持 path 双向绑定
showAlphabooleanfalse是否支持透明度选择
colorFormatstringhex颜色格式：hex / rgb / hsl / hsv
disabledbooleanfalse是否禁用
sizestringdefault尺寸：large / default / small / mini
predefinestring[]-预定义颜色列表
teleportedbooleantrue颜色面板是否插入至 body
persistentbooleantrue关闭后是否保留面板 DOM
validateEventbooleantrue是否触发表单校验
actionAction-颜色确认选择事件

path 支持说明 ​

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

属性path 支持说明
modelValue✅选中颜色双向绑定
action.event.context[].value✅事件上下文可引用 dataModel
showAlpha / predefine / size 等❌静态配置；动态变更请用 updateProp

modelValue 数据绑定 ​

json
{
  "id": "color_theme",
  "component": "WColorPicker",
  "showAlpha": true,
  "modelValue": { "path": "/themeColor" },
  "action": {
    "event": {
      "name": "onThemeColorChange",
      "context": [{ "key": "themeColor", "value": { "path": "/themeColor" } }]
    }
  }
}

配合 updateDataModel 设置初始值：

json
{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "themeColor": "#409EFF"
    }
  }
}

action 定义 ​

用户确认选择颜色时触发，默认 type 为 change。

json
{
  "action": {
    "event": {
      "name": "onThemeColorChange",
      "type": "change",
      "context": [{ "key": "themeColor", "value": { "path": "/themeColor" } }]
    }
  }
}

配合 WForm 使用 ​

json
[
  {
    "id": "form_item_theme",
    "component": "WFormItem",
    "label": "主题色",
    "prop": "themeColor",
    "children": ["color_theme"]
  },
  {
    "id": "color_theme",
    "component": "WColorPicker",
    "showAlpha": true,
    "modelValue": { "path": "/themeColor" },
    "action": {
      "event": {
        "name": "onThemeColorChange",
        "context": [{ "key": "themeColor", "value": { "path": "/themeColor" } }]
      }
    }
  }
]

事件处理 ​

选择变化事件 ​

typescript
processor.onEvent((event) => {
  const { name, context } = event.message.userAction ?? {};
  if (name === 'onThemeColorChange') {
    console.log('主题色已更新:', context?.themeColor);
  }
});

数据同步机制 ​

WColorPicker 在用户确认选择后会自动将值同步到 dataModel，流程与 WInput、WSwitch 一致：

  1. 用户选择颜色并确认
  2. 组件触发 change 事件
  3. modelValue.path 指向的 dataModel 字段自动更新
  4. 若配置了 action，同步派发 A2UI 客户端事件

Design by UED