Vue API
@iyotsuba/gantt-vue 导出 YgGantt、完整公开类型，并重新导出 Core 类型与算法。
Props
数据、视图与联动
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
tasks | GanttTask[] | 必填 | 当前任务窗口 |
links | GanttLink[] | [] | 依赖关系 |
dataMode | 'auto' | 'reactive' | 'immutable' | 'auto' | 大数据可使用不可变模式 |
view | ViewPresetId | 'week' | 支持 v-model:view |
timelineRange | GanttTimelineRange | 数据范围 | 任意日期范围 |
autoFocus | boolean | AutoFocusOptions | true | 密集、最早或今天聚焦 |
groupId | string | '' | 联动组 ID |
sync | 'none' | 'scroll' | 'view' | 'all' | 'none' | 联动范围 |
selectedTaskId | string | '' | 受控选中任务 |
readonly | boolean | false | 禁用任务拖动与缩放 |
布局与任务表
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title / height | string / number | '项目计划' / 330 | 标题与固定高度 |
showToolbar / showTaskTable | boolean | true | 工具栏与任务表显隐 |
sidebarWidth | number | 320 | 支持 v-model:sidebar-width |
minSidebarWidth / maxSidebarWidth | number | 240 / 520 | 分栏限制 |
sidebarResizeStep | number | 8 | 分栏吸附步长 |
resizableSidebar | boolean | true | 允许拖动和键盘调整 |
taskTableColumns | GanttTaskColumnConfig[] | 内置三列 | 支持 v-model:task-table-columns |
autoFitTaskColumns | boolean | false | 根据表头与样本内容自适应 |
taskColumnAutoFitSampleSize | number | 500 | 自适应抽样上限 |
resizableTaskColumns | boolean | true | 允许列级调整 |
taskColumnResizeStep | number | 4 | 列宽吸附步长 |
rowHeight | number | 46 | 行高 |
barHeight / barMinWidth | number | 28 / 28 | 普通任务条几何 |
projectBarHeight / milestoneSize | number | 18 / 16 | 项目条和里程碑尺寸 |
barLayoutResolver | (context) => options | - | 逐任务覆盖宽、高、最小宽度和圆角 |
虚拟化与远程窗口
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
virtualizeRows / virtualizeColumns | boolean | true | 双向虚拟化 |
rowVirtualizationThreshold | number | 120 | 行阈值 |
columnVirtualizationThreshold | number | 180 | 时间格阈值 |
rowOverscan / columnOverscan | number | 6 / 3 | 预渲染窗口 |
totalTaskCount | number | 0 | 远程总行数；0 使用 tasks.length |
taskOffset | number | 0 | 当前远程窗口起始行 |
交互、动效与外观
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
enableCtrlZoom | boolean | true | Ctrl / Command 滚轮切换维度 |
ctrlZoomThreshold / ctrlZoomCooldown | number | 260 / 360 | 灵敏度与冷却毫秒数 |
zoom | number | 1 | 外部像素密度 |
snapToGrid | boolean | true | 拖动按当前时间格吸附 |
snapResolver | (context) => date | - | 自定义吸附算法 |
motion | 'smooth' | 'snappy' | 'none' | 'smooth' | 基础运动节奏 |
viewTransition | 'fade-slide' | 'scale-fade' | 'none' | 'fade-slide' | 维度过渡 |
transitionHook | (context) => void | - | 宿主过渡钩子 |
viewportEnterEffect | 'fade' | 'fade-slide' | 'scale-fade' | 'none' | 'fade-slide' | 新虚拟行入场 |
viewportEnterDuration | number | 180 | 入场毫秒数 |
animationPolicy | 'auto' | 'all' | 'selected' | 'none' | 'auto' | 持续动效范围 |
maxAnimatedTasks / maxAnimatedDependencies | number | 10 / 6 | 视口动效预算 |
pauseAnimationsDuringScroll | boolean | true | 滚动时暂停持续动效 |
gridStyle | 'line' | 'banded' | 'soft' | 'contrast' | 'line' | 网格模板 |
taskEffect / dependencyEffect | Core effect 类型 | 'none' | 基础动效 |
taskPattern / gridPattern | GanttPatternOptions | false | false | 四叶草或上传图片纹理 |
showEdgeIndicators | boolean | true | 逐行视口外任务入口 |
依赖线几何可使用 dependencyLineWidth、dependencyHitWidth、dependencyCurveRadius、dependencyArrowSize 调整，也可用 dependencyPathResolver、dependencyStyleResolver、dependencyEffectResolver 完全接管。任务效果用 taskEffectResolver 按业务字段决定。
事件
| 事件 | 载荷 | 说明 |
|---|---|---|
update:view | ViewPresetId | v-model:view |
update:sidebarWidth | number | v-model:sidebar-width |
update:taskTableColumns | GanttTaskColumnConfig[] | 列配置变化 |
task-change | TaskChangePayload | 移动或缩放建议值 |
task-click | TaskClickPayload | 单击任务行或任务条 |
task-dblclick | TaskDoubleClickPayload | 双击任务 |
task-column-resize | TaskColumnResizePayload | 指针、键盘、API 或自适应改列宽 |
link-dblclick | LinkDoubleClickPayload | 双击或回车编辑依赖线 |
task-select | GanttTask | null | 选中变化 |
focus / scroll | Date | 聚焦或滚动中心日期 |
visible-range-change | GanttVisibleRangePayload | 当前日期与行窗口 |
Slots
| 插槽 | 作用域 | 用途 |
|---|---|---|
toolbar-extra | view, syncActive, focus | 工具栏命令 |
task-header / owner-header / progress-header | - | 三列表头 |
task | task, selected, status | 任务列 |
owner | task | 负责人列 |
progress | task, value | 进度列 |
bar | task, progress | 任务条内容 |
bar-pattern | task, pattern | 纹理层 |
bar-effect | task, effect | 动效层 |
grid-pattern | pattern | 网格纹理 |
dependency | context, path, markerId, style, edit | 完整依赖线 SVG |
edge-indicator | side, count, task, rowIndex, jump | 行级边缘入口 |
empty | - | 空数据状态 |
公开方法
ts
focus(request?)
scrollToDate(date, animate?)
scrollTaskIntoView(taskId, animate?)
scrollToRow(rowIndex, animate?)
fitToData(animate?)
getAnchorDate()
setView(view)
selectTask(taskId)
getRenderStats()
setTaskColumnWidth(columnId, width)
fitTaskColumns()使用 ref<YgGanttExposed | null>() 获得完整类型提示。