基于 Vue3.x 简易版甘特图组件Vue3Gantt

web前端进阶 04-17 1381

前言：

此时看官们对“css3蝴蝶”大概比较注重，你们都想要学习一些“css3蝴蝶”的相关资讯。那么小编同时在网摘上搜集了一些有关“css3蝴蝶””的相关知识，希望咱们能喜欢，朋友们快快来学习一下吧！

#头条创作挑战赛#

今天给大家推荐一款超不错的 vue3 甘特图组件vue3gantt。

vue3-gantt 运用 vue3 构建的甘特图组件，支持重叠日程展示，支持导出gantt img和gantt Excel文件。

安装

npm i vue3-gantt -S

快速使用

  <Gantt    :data="data"    itemText="项目"    dateText="日期"    :dateRangeList="dateRangeList"  />

import { ref } from 'vue'import Gantt from 'vue3-gantt'import 'vue3-gantt/dist/style.css'const dateRangeList = ref(['2022-01-01', '2022-03-05'])const data = ref([  {    type: 'normal',    color: '',    name: '项目1',    schedule: [      {        id: 333330,        name: '900勇士同时在线庆祝活动',        desc: '这个活动很重要，6666666营收数百万，跨部门合作的一个大项目，BOSS亲自下场坐镇指挥，大家一定要团结一心!',        backgroundColor: 'rgb(253, 211, 172)',        textColor: 'rgb(245, 36, 9)',        days: ["2022-01-15","2022-02-05"]      },      {        id: 555550,        name: 'XXXXXX',        desc: '这个活动很重要，6666666营收数百万，跨部门合作的一个大项目，BOSS亲自下场坐镇指挥，大家一定要团结一心!',        backgroundColor: '#28f',        textColor: '#fff',        days: ["2022-02-15","2022-02-25"]      },    ],  },  {    type: 'normal',    color: '',    name: '流星蝴蝶剑',    schedule: [      {        id: 222221,        name: '小年活动',        desc: '这个活动很重要，6666666营收数百万，跨部门合作的一个大项目，BOSS亲自下场坐镇指挥，大家一定要团结一心!',        backgroundColor: '#482',        textColor: '#fff',        days: ["2022-02-25","2022-03-10"]      }    ],  },])

参数配置组件事件

非常nice的一款vue3甘特图组件，感兴趣的可以去看看。