1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| ```进入项目目录，安装所需的依赖：
```bashcd vue-gantt-chartnpm install
```## 设计甘特图组件在Vue2中，我们可以通过创建一个甘特图组件来封装所有的逻辑和样式。首先，在`src/components`目录下创建一个名为`GanttChart.vue`的文件。### 1. 模板结构在`GanttChart.vue`中，我们可以先定义甘特图的基本结构。这里我们使用一个水平的时间轴和一个垂直的任务列表。
```html
<template>
<div class="gantt-chart"> <div class="gantt-chart-header"> <!-- 时间轴 --> </div> <div class="gantt-chart-body"> <!-- 任务列表 --> </div> </div>
</template>
```### 2. 样式设计接下来，我们需要为甘特图添加一些样式。在`src/components/GanttChart.vue`中，添加`
<style>`标签，并定义相关的CSS样式。
```css
<style scoped>.gantt-chart { display: flex; flex-direction: column; height: 100%;}.gantt-chart-header { flex: 0 0 auto; background-color: #f0f0f0;}.gantt-chart-body { flex: 1; overflow-x: auto;}</style>
```### 3. 数据处理甘特图的核心是数据处理。我们需要定义一个任务（Task）模型，包括任务的名称、开始时间、结束时间等信息。在`GanttChart.vue`的`
<script>`标签中，定义Task模型和示例数据。
```java
script
<script>export default { data() { return { tasks: [ { name: '任务1', start: '2021-01-01', end: '2021-02-01' }, { name: '任务2', start: '2021-01-15', end: '2021-03-15' }, // 更多任务... ], }; },};</script>
```### 4. 渲染甘特图现在，我们已经有了数据，接下来需要在模板中渲染甘特图。我们可以在`gantt-chart-body`中遍历任务列表，并为每个任务创建一个表示其持续时间的条形图。
```html
<template>
<div class="gantt-chart"> <div class="gantt-chart-header"> <!-- 时间轴 --> </div> <div class="gantt-chart-body"> <div :key="task.name" :style="{ width: taskWidth(task), left: taskLeft(task) }" class="task-bar" v-for="task in tasks"></div> </div> </div>
</template>
```在`
<script>`标签中，我们需要定义`taskWidth`和`taskLeft`方法来计算每个任务的宽度和左侧位置。
```java
script
<script>export default { // ...其他代码 methods: { taskWidth(task) { // 计算任务宽度 }, taskLeft(task) { // 计算任务左侧位置 }, },};</script>
```### 5. 交互和动态更新最后，我们需要添加一些交互功能，如拖动任务条形图来更新任务的时间。这可以通过Vue2的响应式特性和事件处理来实现。
```html
<template>
<div class="gantt-chart"> <div class="gantt-chart-header"> <!-- 时间轴 --> </div> <div class="gantt-chart-body"> <div v-for="task in tasks" :key="task.name" class="task-bar" :style="{ width: taskWidth(task), left: taskLeft(task) }" @mousedown="startDragging($event, task)" @mousemove="dragging($event,</div></div>
</template>
|