大家好，我是为程序员兄弟操碎了心的小编。每天推荐一个小工具/源码，收藏一下，每天分享一个小技巧。让您轻松节省开发效率，实现不加班、不熬夜、不掉发，是我的目标！今天给大家推荐一款流程设计器easy-flow，它是基于VUE+ElementUI+JsPlumb的流程设计器，通过vuedraggable插件实现节点拖动。功能介绍支持拖拽添加节点点击线条设置条件支持给定数据加载流程图支持画布拖拽支持连接样式、锚点、类型自定义叠加支持力图如何集成在自己的Vue项目中找包。json，并引入如下依赖（不需要额外引入jsplumb）"element-ui":"2.9.1","lodash":"4.17.15","vue":"^2.5.2","vue"-codemirror":"^4.0.6","vuedraggable":"2.23.0"将easy-flow/src/components/ef目录复制到自己项目的一个目录下（比如/src/views），修改main.js，并引入elementUI和easy-flow风格importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'import'@/这是复制的目录，src不要写/EF/指数。css'Vue.use(ElementUI,{size:'small'})数据格式{name:'processD',nodeList:[{id:'nodeA',name:'processD-nodeA',type:'task',left:'18px',top:'223px',ico:'el-icon-user-solid',state:'success'},{id:'nodeB',type:'task',name:'进程D-nodeB',left:'351px',top:'96px',ico:'el-icon-goods',viewOnly:true,state:'error'},{id:'nodeC',name:'processD-nodeC',type:'task',left:'354px',top:'351px',ico:'el-icon-present',state:'warning'},{id:'nodeD',name:'processD-nodeD',type:'task',left:'723px',top:'215px',ico:'el-icon-present',state:'running'}],lineList:[{from:'nodeA',to:'nodeB',label:'直线，自定义线型，固定锚点',connector:'Straight',anchors:['Top','Bottom'],paintStyle:{strokeWidth:2,stroke:'#1879FF'}},{from:'nodeA',to:'nodeC',label:'贝塞尔曲线,固定锚点',connector:'Bezier',锚点:['Bottom','Left']},{from:'nodeB',to:'nodeD',label:'默认连接方式，动态锚点'},{from:'nodeC',to:'nodeD',label:'默认连接方式，动态锚点'}]}开始#下载项目gitclonehttps://github.com/BiaoChengLiu/easy-flow.git#安装依赖包npminstall#启动npmrundev#访问地址http://localhost:8080截图结束分享好玩、有趣、新颖、实用的开源项目、开发者工具和学习资源！希望和大家一起学习交流，欢迎关注我的公众号【Github导航站】
