今天給大家分享一款功能超簡易的vue.js流程圖元件FlowChartVue。

flowchart-vue 一個操作簡便的Vue流程圖元件。可輕鬆快速製作演示流程圖、專案流程結構圖，可自由增刪改節點操作。

安裝

外掛使用

<template> <div id="app"> <button type="button" @click="$refs.chart.add({id: +new Date(), x: 10, y: 10, name: 'New', type: 'operation', approvers: []})">增加</button> <button type="button" @click="$refs.chart.remove()">刪除</button> <button type="button" @click="$refs.chart.editCurrent()">編輯</button> <button type="button" @click="$refs.chart.save()">儲存</button>  <flowchart :nodes="nodes" :connections="connections" @editnode="handleEditNode" @dblclick="handleDblClick" @editconnection="handleEditConnection"  @save="handleChartSave" ref="chart"> </flowchart> </div></template><script> import Vue from 'vue'; import FlowChart from 'flowchart-vue'; Vue.use(FlowChart);  export default { name: 'App', data: function() { return { nodes: [ // Basic fields {id: 1, x: 140, y: 270, name: 'Start', type: 'start'}, // You can add any generic fields to node, for example: description // It will be passed to @save, @editnode {id: 2, x: 540, y: 270, name: 'End', type: 'end', description: 'I'm here'}, ], connections: [ { source: {id: 1, position: 'right'}, destination: {id: 2, position: 'left'}, id: 1, type: 'pass', }, ], }; }, methods: { handleChartSave(nodes, connections) { // axios.post(url, {nodes, connections}).then(resp => { // this.nodes = resp.data.nodes; // this.connections = resp.data.connections; // }); }, handleEditNode(node) { if (node.id === 2) { console.log(node.description); } }, handleEditConnection(connection) {//...}, handleDblClick(position) { this.$refs.chart.add({ id: +new Date(), x: position.x, y: position.y, name: 'New', type: 'operation', approvers: [], }); }, } };</script>

最後放上示例及倉庫地址

# 示例地址https://joyceworks.github.io/flowchart-vue/# github地址https://github.com/joyceworks/flowchart-vue

好了，就介紹到這裡。感興趣的小夥伴可以去嘗試下哈！