gantt 点击事件

### 实现 Gantt 图表中的点击事件处理

为了实现在 `Vue-Gantt-chart` 中的点击事件处理，可以利用 Vue 的事件绑定机制来监听特定的任务条目上的点击操作。通过自定义组件属性和方法，在用户交互时触发相应的逻辑。

下面是一个简单的实现方式：

#### 组件模板部分

<template>
  <div id="gantt-container">
    <!-- 假设这是渲染甘特图的地方 -->
    <vue-gantt :tasks="tasks" @task-clicked="handleTaskClick"></vue-gantt>
  </div>
</template>

这里假设有一个名为 `<vue-gantt>` 的组件用于展示甘特图，并且该组件支持传递任务列表作为 props (`:tasks`) 和接收点击回调函数(`@task-clicked`)。

#### 脚本部分

<script setup>
import { ref } from 'vue';
// 导入 vue-gantt 组件或其他必要的依赖项

const tasks = ref([
  {
    name: "任务A",
    start: new Date(2023, 9, 1),
    end: new Date(2023, 9, 7)
  },
  // 更多任务...
]);

function handleTaskClick(task) {
  console.log('Clicked on task:', task);
}
</script>

在这个脚本片段中，创建了一个响应式的任务数组 `tasks` 并将其传给子组件。当某个任务被点击时，会调用父级定义的方法 `handleTaskClick()` 来处理此事件并打印出所选中的任务信息[^1]。

对于更复杂的场景，比如想要获取更多关于鼠标位置的信息或是执行异步请求，则可以在 `handleTaskClick` 方法内部进一步扩展功能。