%20(2).svg)
项目简介
本项目是一个基于Vue、ElementUI和JsPlumb的流程设计器。借助vuedraggable插件实现节点的拖拽功能，支持流程图的设计与编辑，能满足用户对流程图设计的基本需求。
项目的主要特性和功能
- 拖拽添加节点：可将左侧菜单中的节点拖拽到画布，快速完成节点添加。
- 连线设置条件：支持在连线上设置条件，便于自定义流程逻辑。
- 数据加载流程图：能通过给定数据加载流程图，快速生成所需图形。
- 画布拖拽：支持对整个画布进行拖拽操作，方便查看和编辑大尺寸流程图。
- 连线样式、锚点、类型自定义：可自定义连线的样式、锚点位置和类型，适应不同场景。
- 力导向图：支持力导向图布局，自动计算节点位置，适合展示复杂流程图。
安装使用步骤
前提条件
假设用户已经下载了本项目的源码文件。
安装依赖
进入项目目录，安装依赖包：
bash
cd easy-flow
npm install
启动项目
启动开发服务器：
bash
npm run dev
启动后，访问 http://localhost:8080 即可查看项目。
集成到现有Vue项目
- 引入依赖：在项目的
package.json中添加以下依赖：json "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目录复制到你Vue项目的某个目录下（如/src/views）。 - 修改
main.js：在main.js中引入ElementUI和easy-flow的样式：js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/复制的目录路径/ef/index.css' // 替换为实际目录路径 Vue.use(ElementUI, {size: 'small'}) - 使用组件：在你的Vue组件中引入并使用
easy-flow组件。
数据格式说明
本项目支持通过JSON数据加载流程图，数据格式如下：
json
{
"name": "流程图名称",
"nodeList": [
{
"id": "nodeA",
"name": "节点A",
"type": "task",
"left": "18px",
"top": "223px",
"ico": "el-icon-user-solid",
"state": "success"
}
],
"lineList": [
{
"from": "nodeA",
"to": "nodeB",
"label": "连线描述",
"connector": "Straight",
"anchors": ["Top", "Bottom"],
"paintStyle": { "strokeWidth": 2, "stroke": "#1879FF" }
}
]
}
参数说明
- nodeList：节点列表，包含节点的ID、名称、类型、位置、图标和状态等信息。
- lineList：连线列表，包含连线的起始节点、目标节点、描述、连线类型和锚点等信息。
协议
本项目遵循所使用的插件中规定的协议。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】