基于vue和JsPlumb的流程设计器——easyflow

介绍

easyflow是一个码云上开源的一款流程设计器项目,基于VUE+ElementUI+JsPlumb,通过 vuedraggable 插件来实现节点拖拽。



基于vue和JsPlumb的流程设计器——easyflow


仓库地址

https://gitee.com/xiaoka2017/easy-flow

https://github.com/BiaoChengLiu/easy-flow

功能概述

  • 支持拖拽添加节点
  • 点击线进行设置条件
  • 支持给定数据加载流程图
  • 支持画布拖拽
  • 支持连线样式、锚点、类型自定义覆盖
  • 支持力导图


基于vue和JsPlumb的流程设计器——easyflow


基于vue和JsPlumb的流程设计器——easyflow


如何集成到自己的项目

  • 下载源码
  • 在自己的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端流程设计器,简单易用,界面美观、操作流畅!

您可能还会对下面的文章感兴趣: