![601f93947eb1d6e2ae98136f895b1b0a.png](https://i-blog.csdnimg.cn/blog_migrate/f4707eb3c0e17be0527a8107b2fec7fd.jpeg)
语雀原文 有更好的排版体验~
这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过。
起源
公司项目有个甘特图的需求。
笔者考察了世面上 常见的甘特图组件 后,本着 我上我也行 的心态,以及考虑之前拓展其他开源组件时的痛苦体验,决定自研。一番设计后,就开始动工了。
设计
布局拆解
![8709e02ce74bf14ed73192deb0f1810c.png](https://i-blog.csdnimg.cn/blog_migrate/a83d11a6321f4035b129796eeabb53fa.jpeg)
首先对目标界面进行拆解。可以看到甘特图组件是由 左侧可折叠的树 & 右侧条状图 两部分组成的。
![98ef5b3bb452fbb1f7704416051c0746.png](https://i-blog.csdnimg.cn/blog_migrate/16b82c80cd591de0fe3c4c66aa4a741e.jpeg)
滚动方面, 头部日期 header 在横向滚动中应当跟随条状图内容;在纵向滚动中保持固定。 左侧树 组件则相反。考虑到拆解组件时已经将左右侧分离了。所以纵向滚动行为会通过 同步两边纵向滚动容器的 scrollTop 这一 js 技巧来实现。
![2b5c00e0c891b437a9d5e2ae508a3989.png](https://i-blog.csdnimg.cn/blog_migrate/4ea40125483dda2c609d53a49e4fef9e.jpeg)
继续拆解右侧条状图组件。可以观察到其由三部分组成:
- 日期列表。展示整个甘特图数据的跨越日期范围。此外还负责展示工作日、节假日信息,以及其他的一些高亮信息
- 工具栏。放置一些改变视图的操作按钮
- 条状图容器。布局条状图节点
![1dad8bb056f3003f7681b2aeda8c09dd.png](https://i-blog.csdnimg.cn/blog_migrate/cf1a2b7dbd96e2fad4e61c2a27c084a7.jpeg)
![666e8e10933ead6af27d18d29d845a85.png](https://i-blog.csdnimg.cn/blog_migrate/eacda7d36da62a6c90a2635f820f778e.jpeg)
继续拆解,我们会发现实质上甘特图有三种节点:
- 群组节点。包含自身进度状态和若干子节点的节点
- 叶子节点。没有子节点的节点
- 里程碑节点。特殊的叶子节点。持续时间仅为一天。只包含 完成 & 未完成 两种状态
其中群组节点内又是一个布局容器。所以实际实现会有一个递归的处理。
组件设计
拆解完布局,也就得到了具体的 vue 组件设计~