多棵树根对齐:OkrTreeGroup
align-root 让每棵树的根节点在自身容器内居中。多棵 OKR 树并排对比、且宽度不足以容纳最深的一侧时,各树"各自居中"的位置会不同。用 <OkrTreeGroup> 包裹即可:它测量组内所有左子树容器的最大自然宽度并统一设置,使各树根节点水平坐标完全一致,并自动响应成员的挂载 / 更新 / 尺寸变化。
OkrTreeGroup 与键盘导航
Vue 3 版新增。OkrTreeGroup 包裹多棵 OKR 模式的树,使组内根节点水平坐标一致(原版需在业务层手动测量 DOM);需成员树开启 align-root(默认)。键盘导航为所有树内置。
| 名称 | 类型 | 说明 |
|---|---|---|
| align(prop) | boolean,默认 true | 是否对齐;为 false 时各树独立排布 |
| default(slot) | — | 放置若干 <vue-okr-tree only-both-tree> |
| refresh()(method) | — | 手动重新测量(字体加载完成、外部样式变化等场景;组件已自动响应成员挂载/更新与尺寸变化) |
| 键盘导航 | — | Tab 进入,↑/↓ 在可见节点间移动,→ 展开或进入子节点,← 收起或回到父节点,Enter/Space 选中,Home/End 首尾;OKR 根节点 ← 进入左子树,左树节点镜像。节点带 role=treeitem / aria-expanded / aria-selected / aria-level,焦点环可用 --okr-focus-color / --okr-focus-width 定制 |
两棵宽度不同的 OKR 树被 <okr-tree-group> 包裹后根节点对齐(左列线在同一直线上):
研发中心
产品设计部
| 名称 | 说明 |
|---|---|
align | prop,boolean,默认 true;false 时各树独立排布 |
refresh() | 方法,手动重新测量(字体加载完成、外部样式变化等特殊场景) |
OkrTreeGroup 可以放在 <OkrTreeViewport> 内组合使用(见画布缩放)。