一个Vue.js组件,可帮助您生成带有方向箭头的可拖动,可编辑的流程图,以简便的方式可视化您的工作流程。
# NPM
$ npm install flowchart-vue --save
1.将Vue和Vue流程图组件都导入到项目中。
import Vue from 'vue';
import FlowChart from 'flowchart-vue';
2.注册组件。
Vue.use(FlowChart);
3.将组件添加到模板。
<flowchart
:nodes="nodes"
:connections="connections"
ref="chart">
</flowchart>
4.指定流程图的节点和连接。
export default {
name: 'App',
data: function() {
return {
nodes: [
{
id: 1,
x: 140,
y: 270,
name: 'Start',
type: 'start' // or 'operation'
withd: 120,
height: 60
},
],
connections: [
{
source: {id: 1, position: 'right'},
destination: {id: 2, position: 'left'},
id: 1,
type: 'pass',
},
],
};
},
methods: {
// ...
}
};
5.默认 props 。
nodes: {
type: Array,
default: () => [
{ id: 1, x: 140, y: 270, name: "Start", type: "start" },
{ id: 2, x: 540, y: 270, name: "End", type: "end" },
],
},
connections: {
type: Array,
default: () => [
{
source: { id: 1, position: "right" },
destination: { id: 2, position: "left" },
id: 1,
type: "pass",
},
],
},
width: {
type: [String, Number],
default: 800,
},
height: {
type: [String, Number],
default: 600,
},
readonly: {
type: Boolean,
default: false,
},
render: {
type: Function,
default: render,
},
6.事件处理程序。
@mousemove="handleChartMouseMove"
@mouseup="handleChartMouseUp"
@dblclick="handleChartDblClick($event)"
@mousewheel="handleChartMouseWheel"
@mousedown="handleChartMouseDown($event)"