@composy/gantt-vue

@composy/gantt-vue

企业级甘特图 Vue 3 组件，基于 @composy/gantt-core 封装。

安装

pnpm add @composy/gantt-vue @composy/gantt-core

使用

组件方式

<script setup>
import { GanttChart } from '@composy/gantt-vue'
// Component styles are included with GanttChart.
</script>

<template>
  <GanttChart
    :tasks="tasks"
    :dependencies="dependencies"
    time-scale="day"
    theme="light"
    @ready="onReady"
  />
</template>

Composable 方式

<script setup>
import { useGantt } from '@composy/gantt-vue'

const { containerRef, ganttInstance, tasks } = useGantt({
  tasks: [],
})
void containerRef.value
void ganttInstance.value
void tasks.value
</script>

Plugin 安装

import { GanttPlugin } from '@composy/gantt-vue'
import { createApp } from 'vue'
// Component styles are included with GanttChart.

const app = createApp(App)
app.use(GanttPlugin)

Props

Events

样式

GanttChart 的组件样式随 Vue 单文件组件构建并保持作用域隔离。Core 还导出 injectGanttStyles 和 removeGanttStyles，供需要显式管理核心主题样式的应用使用。

Core 的 config.minZoom 与 config.maxZoom 会限制工具栏或 zoomIn/zoomOut 的时间刻度边界；资源若使用小时容量，可在 config.resources 中设置 capacityUnit: 'hours'，Vue 适配层会原样传递给 Core。

构建与检查

Vue 适配包基于 @composy/gantt-core，使用 @composy/builder 和 rolldown；权威构建、ESLint 与 TypeScript 配置位于 .ldesign/。

命令：pnpm build、pnpm type-check、pnpm lint:check。

产物目录

dist/index.js       # UMD
dist/index.min.js   # UMD minified
es/index.js         # ESM
lib/index.cjs       # CJS