流程图实现,基于vue2实现的流程图

1.基本思路

flex布局 + 伪元素实现竖直的连接线+组件递归

2.效果图

2.1基础的(未截全,大致长这样)

流程图实现,基于vue2实现的流程图_第1张图片

 2.2带有收缩功能的,可以展开和收缩并显示数量

   流程图实现,基于vue2实现的流程图_第2张图片

 3.待需要优化的点,根节点居中是基于整个流程图大小的来居中的,如图的黄色背景区域,如果背景去掉看起来就不是居中显示了

4.项目源码地址

GitHub - yft-code/flow: 流程图 纯css实现流程图

你可能感兴趣的:(流程图)