基于vue和JsPlumb的流程设计器——easyflow
介绍
easyflow是一个码云上开源的一款流程设计器项目,基于VUE+ElementUI+JsPlumb,通过 vuedraggable 插件来实现节点拖拽。
仓库地址
https://gitee.com/xiaoka2017/easy-flow
https://github.com/BiaoChengLiu/easy-flow
功能概述
- 支持拖拽添加节点
- 点击线进行设置条件
- 支持给定数据加载流程图
- 支持画布拖拽
- 支持连线样式、锚点、类型自定义覆盖
- 支持力导图
如何集成到自己的项目
- 下载源码
- 在自己的vue工程中找到package.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样式
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/这个为复制后的目录,src就不要写了/ef/index.css' Vue.use(ElementUI, {size: 'small'})
项目启动
# 下载工程 git clone https://github.com/BiaoChengLiu/easy-flow.git # 安装依赖包 npm install # 启动 npm run dev # 访问地址 http://localhost:8080
总结
easy-flow是非常好的一个Web端流程设计器,简单易用,界面美观、操作流畅!