vue实现可配置流程图

JavaScript09

vue实现可配置流程图,第1张

最近项目中有一个需求，实现可配置的流程图。做之前也是调研了很多现成的插件，比如：go.js，G6，JSPlumb等，但是都不是太符合业务场景，都需要看文档，进行二次开发。最后决定还是自行开发吧，现在还没有开发完，这篇文章也当做是一个记录吧

先上图，看一下现在的效果。

因为传视频要冲会员，所以没有上传视频（太穷了。。。。）

根据后端返回的数据展示流程图，并且点击加号可以新增串行或并行的构建节点，同样，可以删除对应的节点及子任务

接下来，我会说一下我实现这个效果的思路

1.我们的数据格式是JenkinsFile，可以自行百度一下

以上图为例：红色区域内为前端写死的，中间的数据是由后端返回的数据渲染出来的。所以我们要找出同样的内容作为一个div，并将它进行循环，上图中我把蓝色区域作为一个div，其中的

1.箭头和椭圆形的节点分别是icon和一个div组成的

2.利用伪类元素:before,:after写出前后面的两根线

3.通过判断下标，决定是否两个元素中间需要连线，途中黑色区域的线是通过svg来实现

以上就是当前效果的一个实现思路，后续会不断更新。

没有例子，不太明白你想要什么。。。。从图看职能是ps出来的切到网站上

不过做图表的特效倒是有，和你给的不太一样

你看看这个是不是你想要的效果

http://hci.stanford.edu/jheer/files/zoo/ex/networks/force.html

下面是合集地址

http://queue.acm.org/detail.cfm?id=1805128