vue3+Ts 手撕甘特图

Vue3 + TypeScript (简称V3TS) 是结合了 Vue.js 的下一代版本和 TypeScript 这种强类型的 JavaScript 变体来构建应用的技术组合。手撕甘特图通常是一个时间线视图，用于展示项目的进度、任务分配或计划安排。在 V3TS 中制作甘特图，你可以遵循以下步骤：

1. **环境配置**：首先，确保已安装 Vue CLI v3，并设置支持 TypeScript。可以使用命令 `vue create` 创建一个新的 Vue3项目并选择 TypeScript 作为配置。

2. **引入库**：由于甘特图需要数据驱动，你可能需要引入第三方库如 `antv-g6` 或者 `vis` 来处理图形绘制。通过npm或yarn添加依赖。

3. **声明组件**：创建 TypeScript 类型化的组件，例如 `TaskItem.vue`，其中包含任务对象的数据类型 (`Task`) 和方法 (`generateGanttGraph()`).

import { Component, Prop } from 'vue';

interface Task {
  id: number;
  name: string;
  start: Date;
  end: Date;
}

@Component({
  // ...
})
export default class TaskItem extends Vue {
  @Prop() task: Task;

  generateGanttGraph(): void {
    // 使用甘特图库生成图表逻辑
  }
}

4. **数据绑定**：在组件内部或父组件中，管理任务列表 (`Task[]`) 并将其绑定到视图上，以便更新显示。

5. **渲染图表**：在组件的模板部分，利用甘特图库提供的 API 渲染任务节点，传递任务数据。

6. **事件监听**：为了动态调整和交互，可以添加事件监听器，比如拖拽、点击事件等。

7. **样式定制**：用 CSS 样式美化甘特图，使其符合项目的视觉风格。