vue dhtmlxgantt gantt.showQuickInfo的使用方法

在使用 Vue.js 和 dhtmlxGantt 库时，可以通过 `gantt.showQuickInfo` 方法来显示任务的快速信息。下面是一个简单的示例代码：

<template>
  <div ref="ganttContainer" style="width: 100%; height: 500px;"></div>
</template>

<script>
import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

export default {
  mounted() {
    gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
    gantt.init(this.$refs.ganttContainer);
    gantt.parse({
      data: [
        {
          id: 1,
          text: "Task #1",
          start_date: "2022-01-01 00:00:00",
          duration: 3
        },
        {
          id: 2,
          text: "Task #2",
          start_date: "2022-01-04 00:00:00",
          duration: 5
        }
      ]
    });
    gantt.showQuickInfo = function(id) {
      const task = gantt.getTask(id);
      alert(task.text);
    };
  }
};
</script>

在上面的代码中，我们首先在 `mounted` 钩子函数中初始化了 gantt，并使用 `gantt.parse` 方法来加载任务数据。然后我们定义了 `gantt.showQuickInfo` 方法，它会在用户单击任务时显示一个快速信息。在这个例子中，我们只是简单地弹出了任务的文本内容，你可以根据自己的需要来修改这个方法。