关于github:一个超级棒的VUE流程设计器

大家好，我是为宽广程序员兄弟操碎了心的小编，每天举荐一个小工具 / 源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节俭开发效率，实现不加班不熬夜不掉头发，是我的指标！

明天小编举荐一款流程设计器 easy-flow，easy-flow 基于 VUE+ElementUI+JsPlumb 的流程设计器，通过 vuedraggable 插件来实现节点拖拽。

反对拖拽增加节点
点击线进行设置条件
反对给定数据加载流程图
反对画布拖拽
反对连线款式、锚点、类型自定义笼罩
支持力导图

在本人的 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

本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！
心愿能与大家独特学习交换, 欢送关注我的公众号【Github 导航站】。

关于github:一个超级棒的VUE流程设计器

性能介绍

如何集成

数据格式

启动

截图

结尾