一個超級棒的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導航站】。