1.基本思路
flex布局 + 伪元素实现竖直的连接线+组件递归
2.效果图
2.1基础的(未截全,大致长这样)
2.2带有收缩功能的,可以展开和收缩并显示数量
3.待需要优化的点,根节点居中是基于整个流程图大小的来居中的,如图的黄色背景区域,如果背景去掉看起来就不是居中显示了
4.项目源码地址文章来源:https://www.toymoban.com/news/detail-599456.html
GitHub - yft-code/flow: 流程图 纯css实现流程图文章来源地址https://www.toymoban.com/news/detail-599456.html
到了这里,关于流程图实现,基于vue2实现的流程图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!