指南总览
一页速查：想做什么 → 用哪个 prop / 方法 → 去哪页看细节
布局与展开
| 要做的事 | 用什么 | 详见 |
|---|---|---|
| 选展开方向 | direction="vertical" | "horizontal" | 快速开始 |
| 飞书 OKR 双向展开 | only-both-tree + :left-data（必须 horizontal） | 快速开始 |
| 根节点不跳位 | align-root（默认开）；多棵树对齐用 OkrTreeGroup | 多树根对齐 |
| 展开/收起动画 | animate + animate-name + animate-duration | 主题与样式定制 |
| 连接线换 SVG | connector="svg" + connector-shape | 主题与样式定制 |
| 手风琴 / 点击展开 | accordion / expand-on-click-node | 受控状态与方法 |
| 大数据放不下 | OkrTreeViewport 缩放平移与导出 | 画布缩放 |
数据与状态
| 要做的事 | 用什么 | 详见 |
|---|---|---|
| 字段名不一样 | props: { label, children, disabled, isLeaf } | API |
| 只加载展开路径 | lazy + load | 懒加载 |
| 精确控制展开/选中 | v-model:expanded-keys / v-model:current-key（需 node-key） | 受控状态与方法 |
| 命令式增删改 | append / insertBefore / insertAfter / remove / moveNode | 受控状态与方法 |
| 搜索过滤 | filter-node-method + ref.filter(value) | 需要注意的行为 |
| 面包屑 / 全选可见 | getNodePath() / getVisibleNodes() | 受控状态与方法 |
| 勾选 | show-checkbox + getCheckedKeys() 等 | 复选框与拖拽 |
| 拖拽换父级 | draggable + allow-drag / allow-drop | 复选框与拖拽 |
外观与集成
| 要做的事 | 用什么 | 详见 |
|---|---|---|
| 换整体观感 | theme（六套内置）或自写 .okr-theme-{name} | 主题与样式定制 |
| 精确调外观 | --okr-* 变量（可写在任意祖先或内联） | 主题与样式定制 |
| 接 Tailwind | unstyled（只去卡片外观，布局与连接线保留） | 主题与样式定制 |
| 打印 / 导出图片 | 打印样式自动生效；图片用 exportImage() | 主题与样式定制、画布 |
| 类型收窄 | createTypedOkrTree<T>() | 类型化 |
| 键盘与读屏 | 内置 WAI-ARIA tree 与漫游 tabindex | 键盘导航 |
| SSR / Nuxt | 服务端可直接渲染，三项客户端专属能力除外 | 快速开始 |
子页
- 快速开始 — 安装、样式引入、全局注册、CDN / UMD、SSR
- Demo 总览 — 24 个可交互用例（与 Playground 同一批组件源码）
- 自定义节点内容 — 插槽 / 组件 / render-content 三种写法
- 受控状态与方法 — 判定规则、ref 方法、事件回调
- 复选框与拖拽 — 联动与半选、三分区放置与钩子
- 懒加载子节点 —
load/resolve/reject、isLeaf、失败重试 - 画布缩放 OkrTreeViewport — props / 方法 / 交互契约 / 导出
- 多树根对齐 OkrTreeGroup — 测量机制与自动重测
- 键盘导航与可访问性 — 按键表与漫游 tabindex
- 类型化 createTypedOkrTree — T 覆盖位置与导出清单
- 需要注意的行为 — 回写源数据、
node-key缺失、只读数据、创建期 prop - 仓库与本地开发 — 目录结构、三份真源、命令与发布