WBreadcrumb 面包屑组件

A2UI Protocol JSON Schema

面包屑组件，基于 WinDesignNext Breadcrumb 封装，通过 dataSource 数据驱动自动渲染面包屑节点，支持点击事件响应。可选 child 自定义每个节点的显示内容。

数据驱动模式：与 WiRadioGroup 相同，dataSource 提供面包屑数组，child 为节点内容模板 ID，模板内通过 @row.xxx 访问当前项数据。

基础用法

API

属性	类型	默认值	说明
component	string	WBreadcrumb	组件类型（必填）
separator	string | DataBindingValue	/	分隔符
separatorIcon	string	—	分隔符图标名称
dataSource	string	—	面包屑数据数组路径
child	string	—	节点内容模板组件 ID
action	object	—	点击节点事件配置

dataSource 项字段

字段	类型	说明
label	string	节点显示文字（无 child 模板时使用）
name	string	备选显示文字
to	string | object	Vue Router 路由目标
replace	boolean	是否 replace 跳转

事件

事件	type	说明
点击节点	click	点击非末级节点时触发（末级通常为当前页）

{
  "action": {
    "event": {
      "name": "onBreadcrumbClick",
      "type": "click",
      "context": [{ "key": "path", "value": { "path": "@row.path" } }]
    }
  }
}

path 支持说明

属性	path 支持	说明
separator	✅	动态分隔符
dataSource	✅	字符串路径，指向 dataModel 中的面包屑数组
模板内子组件	✅	使用 @row.xxx / @.$index 访问当前项

动态面包屑

Agent 更新面包屑数据：

{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/breadcrumbItems",
    "value": [
      { "label": "首页", "path": "/home" },
      { "label": "检验报告" }
    ]
  }
}

使用场景

场景	推荐配置
页面层级导航	dataSource + child 模板 Text
Agent 驱动导航	非末级项配置 action click 事件
Vue Router 集成	dataSource 项配置 to 路径

注意事项

• 未配置 child 时，使用 dataSource 项的 label / name 作为节点文字
• 最后一项通常为当前页，默认不触发 click 事件（无 to 时）