vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）

语雀原文 有更好的排版体验~

这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过。

起源

公司项目有个甘特图的需求。

笔者考察了世面上 常见的甘特图组件 后，本着 我上我也行 的心态，以及考虑之前拓展其他开源组件时的痛苦体验，决定自研。一番设计后，就开始动工了。

设计

布局拆解

首先对目标界面进行拆解。可以看到甘特图组件是由 左侧可折叠的树 & 右侧条状图 两部分组成的。

滚动方面， 头部日期 header 在横向滚动中应当跟随条状图内容；在纵向滚动中保持固定。 左侧树 组件则相反。考虑到拆解组件时已经将左右侧分离了。所以纵向滚动行为会通过 同步两边纵向滚动容器的 scrollTop 这一 js 技巧来实现。

继续拆解右侧条状图组件。可以观察到其由三部分组成：

1. 日期列表。展示整个甘特图数据的跨越日期范围。此外还负责展示工作日、节假日信息，以及其他的一些高亮信息
2. 工具栏。放置一些改变视图的操作按钮
3. 条状图容器。布局条状图节点

继续拆解，我们会发现实质上甘特图有三种节点：

• 群组节点。包含自身进度状态和若干子节点的节点
• 叶子节点。没有子节点的节点
• 里程碑节点。特殊的叶子节点。持续时间仅为一天。只包含 完成 & 未完成 两种状态

其中群组节点内又是一个布局容器。所以实际实现会有一个递归的处理。

组件设计

拆解完布局，也就得到了具体的 vue 组件设计~