Vue 快速开始

安装

bash

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

在应用入口加载样式：

import { createApp } from 'vue'
import '@iyotsuba/gantt-vue/style.css'
import App from './App.vue'

createApp(App).mount('#app')

最小组件

vue

<script setup lang="ts">
import { ref } from 'vue'
import type { GanttTask, ViewPresetId } from '@iyotsuba/gantt-core'
import { YgGantt } from '@iyotsuba/gantt-vue'

const view = ref<ViewPresetId>('week')
const tasks: GanttTask[] = [
  {
    id: 'design',
    title: '交互设计',
    start: '2026-08-03',
    end: '2026-08-12',
    progress: 68,
    status: 'active',
    color: '#1f9d68',
  },
]
</script>

<template>
  <YgGantt
    v-model:view="view"
    title="产品研发"
    :tasks="tasks"
    :height="480"
    :auto-focus="{ enabled: true, strategy: 'dense', windowDays: 14, onViewChange: true }"
    @task-change="payload => console.log(payload)"
    @task-dblclick="payload => console.log('编辑任务', payload.task)"
  />
</template>

Vue 快速开始 ​

安装 ​

最小组件 ​

下一步 ​

Vue 快速开始

安装

最小组件

下一步