流程图包含开始,结束,工具,分支节点。
节点样式参考了蓝鲸智云的标准运维(https://bk.tencent.com/docs/document/5.1/3/45),如下图。
下图是通过鼠标正在连线
具体的实现参考了几个大神的代码
https://github.com/caoyu48/vue-g6-editor
https://github.com/OXOYO/X-Flowchart-Vue
实现功能:
拖动生成节点、连线、位置微调、撤销重做等
代码比较辣鸡,大神看到的话请多提宝贵意见
封装成了组件的形式,代码: https://pan.baidu.com/s/10mPMZBVClHaeDjDkG4eUOQ 提取码: mbxw
网友评论