组件参考

a2ui-vue 内置了 66 个组件，覆盖布局、内容展示、交互、数据展示等类别。

所有组件均可通过 A2UI JSON 消息驱动，也可直接作为 Vue 组件导入使用。

需要了解哪些属性支持 path 数据绑定？请参阅 path 数据绑定速查。

组件汇总

组件名	类型	说明	文档链接
Text	A2UI 基础	文本组件，支持语义化变体渲染	详情
WRow	WinDesign	行布局容器，水平排列子组件	详情
WCol	WinDesign	列布局容器，配合 WRow 使用	详情
WSpace	WinDesign	间距组件，设置组件间间距	详情
WDivider	WinDesign	分割线，用于内容区域分隔	详情
WDropdown	WinDesign	下拉菜单，数据驱动操作菜单	详情
WScrollbar	WinDesign	滚动条，固定高度区域自定义滚动	详情
WBreadcrumb	WinDesign	面包屑，数据驱动层级导航路径	详情
WCard	WinDesign	卡片组件，信息容器	详情
WButton	WinDesign	按钮组件，支持点击事件	详情
WLink	WinDesign	链接组件，跳转或触发点击事件	详情
WText	WinDesign	WinDesign 文本组件	详情
WTag	WinDesign	标签组件，用于标记和分类	详情
WAlert	WinDesign	提示组件，展示警告/成功/错误信息	详情
WStatus	WinDesign	状态指示，带圆点的状态文字展示	详情
WProgress	WinDesign	进度条，展示任务或加载进度	详情
WTitle	WinDesign	标题组件，用于页面区块标题	详情
WTooltip	WinDesign	文字提示，展示简短说明	详情
WForm	WinDesign	表单容器，用于数据收集	详情
WFormItem	WinDesign	表单项，配合 WForm 使用	详情
WInput	WinDesign	输入框组件，支持双向绑定	详情
WAutocomplete	WinDesign	自动补全输入框，输入时匹配建议列表	详情
WMention	WinDesign	提及输入框，@ 触发人员/对象提及	详情
WPagination	WinDesign	分页，列表数据分页导航	详情
WPopover	WinDesign	悬浮框，展示较丰富的弹出内容	详情
WInputTag	WinDesign	标签输入框，输入回车生成多值标签	详情
WInputNumber	WinDesign	数字输入框，支持步进与精度控制	详情
WSelect	WinDesign	下拉选择组件，支持单选多选搜索	详情
WSelectV2	WinDesign	虚拟化下拉选择，适合大数据量选项	详情
WTableSelect	WinDesign	下拉表格选择，展示多列选项信息	详情
WTransfer	WinDesign	穿梭框，左右栏移动多选数据	详情
WSwitch	WinDesign	开关，用于两种状态切换	详情
WRadioGroup	WinDesign	数据驱动单选框组，通过 dataSource 渲染	详情
WRate	WinDesign	评分，用于星级评级操作	详情
WCheckboxGroup	WinDesign	数据驱动复选框组，通过 dataSource 渲染	详情
WSegmented	WinDesign	分段控制器，多选项互斥切换	详情
WTreeSelect	WinDesign	树形选择，适用于层级数据选取	详情
WTree	WinDesign	树形控件，展示与操作层级数据	详情
WTreeV2	WinDesign	虚拟化树形控件，适合大规模层级数据	详情
WCascader	WinDesign	级联选择器，支持多级数据选择	详情
WDatePicker	WinDesign	日期选择器，支持日期/范围选择	详情
WTimePicker	WinDesign	时间选择器，支持时刻/范围选择	详情
WTimeSelect	WinDesign	固定时间点选择，适合预约时段	详情
WCollapse	WinDesign	折叠面板，用于内容分组	详情
WColorPicker	WinDesign	颜色选择器，用于选择颜色值	详情
WCollapseItem	WinDesign	折叠项，配合 WCollapse 使用	详情
WSplitter	WinDesign	分隔面板，可拖拽调整区域大小	详情
WSplitterPanel	WinDesign	分隔面板项，配合 WSplitter 使用	详情
WTabs	WinDesign	标签页，数据驱动多标签切换	详情
WTimeline	WinDesign	时间线，用于展示时间流信息	详情
WTimelineItem	WinDesign	时间线节点，配合 WTimeline 使用	详情
WDescriptions	WinDesign	描述列表，用于键值对展示	详情
WDescriptionsItem	WinDesign	描述列表项，配合 WDescriptions 使用	详情
WList	WinDesign	数据驱动列表，通过模板自动循环渲染	详情
WIcon	WinDesign	图标组件，支持颜色/尺寸/名称数据绑定	详情
WTable	WinDesign	表格组件，用于数据列表展示	详情
WTableV2	WinDesign	虚拟化表格，适合大数据量列表	详情
WEmpty	WinDesign	空状态，用于无数据占位展示	详情
WResult	WinDesign	结果页，用于操作结果反馈展示	详情
WSkeleton	WinDesign	骨架屏，加载过程中的占位动画	详情
WSlider	WinDesign	滑块，用于数值区间选取	详情
WSkeletonItem	WinDesign	骨架屏项，配合 WSkeleton 使用	详情
WTableColumn	WinDesign	表格列，配合 WTable 使用	详情
WiCheckboxGroup	WinDesignAI	数据驱动复选框组，通过 dataSource 自动渲染	详情
WiRadioGroup	WinDesignAI	数据驱动单选框组，通过 dataSource 自动渲染	详情
WiTag	WinDesignAI	标签组件，用于标记和分类	详情
WiListTableSelect	WinDesignAI	列表选择器，用于表格数据选择	详情

---

组件事件类型

支持 action 属性的组件在触发事件时会携带 type 字段：

组件	触发时机	默认 type 值
WButton	点击按钮	click
WLink	点击链接	click
WBreadcrumb	点击节点	click
WDropdown	点击菜单项	command
WAlert	关闭提示	close
WScrollbar	滚动	scroll
WScrollbar	到达边缘	end-reached
WInput	输入内容	input
WAutocomplete	输入内容	input
WAutocomplete	选中建议	change
WMention	输入内容	input
WMention	选中提及	select
WInputTag	标签变化	change
WInputNumber	数值变化	change
WSelect	选择变化	change
WSelectV2	选择变化	change
WTableSelect	选择变化	change
WTransfer	选项移动	change
WSwitch	状态变化	change
WRadioGroup	选择变化	change
WRate	评分变化	change
WCheckboxGroup	勾选变化	change
WSegmented	切换变化	change
WSlider	滑块变化	change
WTreeSelect	选择变化	change
WTree	节点交互	node-click / check / current-change
WTreeV2	节点交互	node-click / check / current-change
WPagination	分页变化	change
WPopover	显示/隐藏	visible-change
WTooltip	显示/隐藏	show / hide
WCascader	选择变化	change
WColorPicker	选择变化	change
WDatePicker	选择变化	change
WTimePicker	选择变化	change
WTimeSelect	选择变化	change
WiCheckboxGroup	勾选变化	change
WiRadioGroup	选择变化	change
WiListTableSelect	选择变化	change
WiListTableSelect	添加项	add
WiListTableSelect	删除项	remove
WSplitter	拖拽结束	resize-end
WSplitter	面板折叠	collapse
WTabs	切换标签	tab-click
WTabs	关闭标签	tab-remove

详细事件监听说明请参考 事件监听。

---

A2UI 标准属性

所有 WinDesign 组件的属性完全继承原组件库，新增以下 A2UI 标准属性：

属性名	类型	说明
id	string	组件唯一标识（必填）
component	string	组件类型（必填）
children	string[]	子组件 ID 列表
child	string	单个子组件 ID
action	object	A2UI v0.9 事件定义

action 结构

interface Action {
  event: {
    name: string; // 事件名称
    type?: string; // 事件类型（可选，组件会自动补充默认值）
    context?: ActionContextItem[]; // 上下文数据
  };
}

示例：

{
  "action": {
    "event": {
      "name": "submitForm",
      "type": "click",
      "context": [{ "key": "formId", "value": { "literalString": "form_001" } }]
    }
  }
}

---

path 数据绑定速查

A2UI 通过 DataBindingValue 将组件属性与 dataModel 关联。常见写法：

写法	示例	适用场景
path 引用	{ "path": "/quantity" }	双向绑定（modelValue）或动态读取属性
字符串字面量	{ "literalString": "09:30" }	初始文本值
数字字面量	{ "literalNumber": 10 }	初始数值
数组字面量	{ "literalArray": ["a", "b"] }	初始数组（范围选择、级联路径等）
对象字面量	{ "literalObject": { "multiple": true } }	初始对象（如级联 props 配置）
dataSource 路径	"dataSource": "/options"	字符串路径，加载选项/列表/表格数据
作用域路径	{ "path": "@row.name" }	列表/表格/单选模板内引用当前行

完整协议说明见 数据绑定格式。

各组件 path 支持一览

组件	支持 path 的属性	文档
表单输入
WInput	modelValue	WInput
WAutocomplete	modelValue; dataSource	WAutocomplete
WMention	modelValue; dataSource	WMention
WInputTag	modelValue	WInputTag
WInputNumber	modelValue, min, max, step, precision	WInputNumber
WPagination	modelValue, pageSize, total, pageCount, pageSizes	WPagination
WSelect	modelValue; dataSource	WSelect
WSelectV2	modelValue, height, itemHeight; dataSource	WSelectV2
WTableSelect	modelValue, props, tableWidth, tableMaxHeight; dataSource, columnsSource	WTableSelect
WTransfer	modelValue, props; dataSource	WTransfer
WSwitch	modelValue, activeValue, inactiveValue, activeText, inactiveText	WSwitch
WRadioGroup	modelValue; dataSource; 模板 @row.*	WRadioGroup
WRate	modelValue	WRate
WCheckboxGroup	modelValue; dataSource; 模板 @row.*	WCheckboxGroup
WTabs	modelValue; dataSource; 模板 @row.*	WTabs
WBreadcrumb	separator; dataSource; 模板 @row.*	WBreadcrumb
WDropdown	dataSource; 模板 @row.*	WDropdown
WSegmented	modelValue, props; dataSource	WSegmented
WSlider	modelValue, min, max, step	WSlider
WTreeSelect	modelValue, props; dataSource	WTreeSelect
WTree	dataSource, props, currentNodeKey, checkedKeys, emptyText	WTree
WTreeV2	dataSource, props, currentNodeKey, checkedKeys, expandedKeys, height, itemSize, emptyText	WTreeV2
WCascader	modelValue, props, separator; dataSource	WCascader
WColorPicker	modelValue	WColorPicker
WDatePicker	modelValue, type, format, valueFormat	WDatePicker
WTimePicker	modelValue, format, valueFormat	WTimePicker
WTimeSelect	modelValue, format, start, end, step, minTime, maxTime	WTimeSelect
选择与展示
WiRadioGroup	modelValue; dataSource; 模板 @row.*	WiRadioGroup
WiCheckboxGroup	modelValue; dataSource; 模板 @row.*	WiCheckboxGroup
WiListTableSelect	modelValue; dataSource	WiListTableSelect
WCollapse	modelValue	WCollapse
WCollapseItem	title, name	WCollapse
WSplitterPanel	size, min, max, title	WSplitter
WTimelineItem	timestamp, type, color	WTimeline
文本与图标
Text	text	Text
WText	text, type	WText
WTag / WiTag	type	WTag / WiTag
WAlert	title, description, type, closeText	WAlert
WScrollbar	height, maxHeight	WScrollbar
WStatus	type	WStatus
WProgress	percentage, type, status, strokeWidth, width, title	WProgress
WLink	href, type	WLink
WPopover	content, title, visible	WPopover
WTooltip	content, visible	WTooltip
WEmpty	description, message	WEmpty
WResult	title, subTitle, icon	WResult
WSkeleton	loading, count, rows	WSkeleton
WIcon	name, color, size	WIcon
数据驱动
WList	dataSource; 模板 @row.*, @.$index	WList
WTable	dataSource; 单元格 @row.*	WTable
WTableV2	dataSource, columnsSource, width, height, maxHeight, rowHeight	WTableV2
事件
带 action 的组件	action.event.context[].value	各组件文档 / WButton
带 API 的 action	action.event.api.constParams[].value	json-format

不支持 path 的组件

以下组件属性均为静态配置，动态变更请使用 updateDataModel 或 updateProp：

WRow、WCol、WSpace、WDivider、WTimeline、WCard、WForm、WFormItem、WTitle、WDescriptions、WDescriptionsItem、WSplitter

作用域路径（@row）

在 WList、WTable、WRadioGroup、WCheckboxGroup、WTabs、WBreadcrumb、WDropdown、WiRadioGroup、WiCheckboxGroup 的数据驱动模板中，子组件可用作用域路径访问当前行/当前选项数据：

写法	含义	示例
@row.xxx	当前行字段	@row.label
@row.a.b	嵌套字段	@row.user.name
@.$index	当前索引	@.$index
scope.row.xxx	同上（完整写法）	scope.row.name

{
  "id": "item-text",
  "component": "Text",
  "text": { "path": "@row.name" },
  "variant": "body"
}

---

使用方式

JSON 消息驱动

通过 A2UI v0.9 协议消息驱动组件渲染：

{
  "version": "v0.9",
  "updateComponents": {
    "surfaceId": "main",
    "components": [
      {
        "id": "row_001",
        "component": "WRow",
        "gutter": 20,
        "justify": "center",
        "children": ["col_001", "col_002"]
      },
      {
        "id": "col_001",
        "component": "WCol",
        "span": 6,
        "children": ["button_001"]
      },
      {
        "id": "button_001",
        "component": "WButton",
        "type": "primary",
        "child": "button_text_001",
        "action": {
          "event": {
            "name": "onClick",
            "type": "click"
          }
        }
      },
      {
        "id": "button_text_001",
        "component": "Text",
        "text": "点击按钮",
        "variant": "body"
      }
    ]
  }
}

Vue 组件导入

直接作为 Vue 组件使用：

<script setup>
import { A2UIText } from 'win-design-a2ui-vue';
</script>

<template>
  <A2UIText text="Hello" variant="h1" />
</template>