Vue 组件 API

@org-tree/vue 的包根入口导出组件与公开注入键。

OrgTreeProvider

提供 Core 实例和交互画布。

Props

属性	类型	必填	说明
sdk	OrgTreeCore	是	当前树使用的 Core 实例

Slots

插槽	说明
default	放置 OrgTree 或其他需要 Provider 上下文的组件

<OrgTreeProvider :sdk="sdk">
  <OrgTree />
</OrgTreeProvider>

Provider 会创建 DomCanvas，当前画布高度为 100vh。

OrgTree

订阅布局和状态，计算画布尺寸，绘制节点及父子连接线。

Props

当前没有公开 props。

Default slot

interface OrgTreeSlotContext {
  node: PositionedNode
  isLeaf: boolean
  expanded: boolean
  loading: boolean
}

<OrgTree v-slot="{ node, isLeaf, expanded, loading }">
  <BusinessNode
    :node="node"
    :is-leaf="isLeaf"
    :expanded="expanded"
    :loading="loading"
  />
</OrgTree>

不传 slot 时使用内置节点卡片，只显示 nodeId。

OrgTreeNode

包入口同时导出低层节点组件 OrgTreeNode。它的 props 包含：

属性	类型	必填
node	PositionedNode	是
offsetX	number	是
offsetY	number	是

该组件依赖 OrgTree 提供的多个注入值，普通业务不应单独挂载。自定义节点内容优先使用 OrgTree 插槽。

公开注入键

高级组件可以通过 Vue inject() 访问树上下文。

导出	值类型	由谁提供	说明
ORG_TREE_SDK_KEY	OrgTreeCore	OrgTreeProvider	Core 实例
ORG_TREE_CANVAS_REF_KEY	Ref	OrgTreeProvider	内部画布组件引用
ORG_TREE_FLAT_KEY	ShallowRef<PositionedNode[]>	OrgTree	当前布局节点
ORG_TREE_STATUS_KEY	Map<string, NodeStatus>	OrgTree	Vue 响应式状态表
ORG_TREE_LOCATE_KEY	(id?) => Promise<void>	OrgTree	将指定节点定位到视口
ORG_TREE_LOCATE_BY_NODE_KEY	(node) => Promise<void>	OrgTree	重排后补偿指定节点位置

示例：

import {
  ORG_TREE_LOCATE_KEY,
  ORG_TREE_STATUS_KEY,
} from '@org-tree/vue'
import { inject } from 'vue'

const locateNode = inject(ORG_TREE_LOCATE_KEY)
const statusMap = inject(ORG_TREE_STATUS_KEY)

注意注入层级

由 OrgTree 提供的键只能在它的后代组件中注入。Provider 的兄弟组件或页面级工具栏无法直接读取这些值。

CSS 类名

主要稳定类名：

类名	元素
.org-tree	布局内容根容器
.org-tree-node	节点绝对定位容器
.org-tree-node__default-card	默认卡片
.org-tree-expand-btn	展开/收起按钮
.org-tree-expand-btn--loading	加载状态按钮

业务样式建议作用于自定义卡片自身，避免依赖连接线和画布的内部 DOM 结构。

组件导入

import {
  OrgTree,
  OrgTreeNode,
  OrgTreeProvider,
} from '@org-tree/vue'

Vue 包要求宿主提供 Vue ^3.3.0 和 @org-tree/core。