vue3+dhtmlx-gantt的组合式API写法

Vue3 和 DHTMLX Gantt 结合可以创建强大的任务管理应用。DHTMLX Gantt 是一款流行的 JavaScript 时间轴库，而 Vue3 提供了声明式的编程模型。以下是一个简单的组合式 API 写法示例：

首先，你需要安装 DHTMLX Gantt 的 Vue 插件，如 `@dhtmlx/dhxgantt-vue`：

npm install @dhtmlx/dhxgantt-vue

然后，在你的 Vue 组件里，导入并使用它：

<template>
  <div id="gantt-container" :dxgantt="ganttOptions"></div>
</template>

<script>
import { Dxgantt } from '@dhtmlx/dhxgantt-vue';

export default {
  data() {
    return {
      ganttOptions: {
        container: 'gantt-container',
        // 更具体的配置选项，如任务数据、视图模式等
        tasks: [
          { text: 'Task 1', start: '2023-01-01', duration: '1 week' },
          // ...更多任务
        ],
      },
    };
  },
  components: {
    Dxgantt,
  },
};
</script>

在这个例子中，`ganttOptions` 对象包含了初始化 Gantt 的必要信息，包括容器ID和任务列表。在组件实例化时，Vue 将自动将这些配置传递给 Gantt。