功能介绍
- 支持拖拽添加节点
- 点击线进行设置条件
- 支持给定数据加载流程图
- 支持画布拖拽
- 支持连线样式、锚点、类型自定义覆盖
- 支持力导图
如何集成
- 在自己的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'})
数据格式
{
name: '流程D',
nodeList: [
{
id: 'nodeA',
name: '流程D-节点A',
type: 'task',
left: '18px',
top: '223px',
ico: 'el-icon-user-solid',
state: 'success'
},
{
id: 'nodeB',
type: 'task',
name: '流程D-节点B',
left: '351px',
top: '96px',
ico: 'el-icon-goods',
viewOnly: true,
state: 'error'
},
{
id: 'nodeC',
name: '流程D-节点C',
type: 'task',
left: '354px',
top: '351px',
ico: 'el-icon-present',
state: 'warning'
}, {
id: 'nodeD',
name: '流程D-节点D',
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',
anchors: ['Bottom', 'Left']
}, {
from: 'nodeB',
to: 'nodeD',
label: '默认连线样式,动态锚点'
}, {
from: 'nodeC',
to: 'nodeD',
label: '默认连线样式,动态锚点'
}
]
}
启动
# 下载工程
git clone https://github.com/BiaoChengLiu/easy-flow.git
# 安装依赖包
npm install
# 启动
npm run dev
# 访问地址
http://localhost:8080
截图
![](https://i-blog.csdnimg.cn/blog_migrate/0ffeca5db5f1626f1f464811672143b5.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/95b4cb0f072af3e6f1ea122bfa0a0b9b.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/18fef228531e8851c166780fd7954acf.jpeg)