svelte-gantt使用方法

Svelte Gantt是一个用于创建甘特图的JavaScript库。它提供了一种简单且灵活的方式来展示和管理任务和时间表。下面是使用Svelte Gantt的基本方法：

1. 首先，你需要在你的项目中安装Svelte Gantt。你可以使用npm或yarn来安装它：

npm install svelte-gantt

2. 在你的Svelte组件中，导入并使用Svelte Gantt组件。你可以在组件中设置任务和时间表的数据：

<script>
  import { Gantt } from 'svelte-gantt';

  const tasks = [
    { id: 1, name: 'Task 1', start: new Date(2022, 0, 1), end: new Date(2022, 0, 5) },
    { id: 2, name: 'Task 2', start: new Date(2022, 0, 3), end: new Date(2022, 0, 8) },
    // 添加更多任务...
  ];

  const options = {
    // 设置甘特图的选项，如颜色、高度等
  };
</script>

<Gantt {tasks} {options} />

3. 在你的Svelte组件中，你可以监听甘特图的交互事件，如任务的拖动、缩放等：

<script>
  import { Gantt } from 'svelte-gantt';

  const tasks = [
    // 任务数据...
  ];

  const options = {
    // 选项...
  };

  function handleTaskDrag(task) {
    // 处理任务拖动事件
  }

  function handleTaskResize(task) {
    // 处理任务缩放事件
  }
</script>

<Gantt {tasks} {options} on:taskDrag={handleTaskDrag} on:taskResize={handleTaskResize} />

这是使用Svelte Gantt的基本方法。你可以根据你的需求自定义甘特图的样式和交互行为。希望这可以帮助到你！