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