vue3-super-flow 使用方法

vue3-super-flow 使用方法
Vue3-super-flow是一个基于Vue3的工作流组件库，它可以帮助我们将复杂的流程规划和状态控制通过拖拽节点、连线方式实现可视化，使用起来非常方便，本文将为大家详细介绍Vue3-super-flow的使用方法。

安装
```
npm install vue3-super-flow --save
```
使用
引入组件
在需要使用组件的模块中引入：
```javascript
import SuperFlow from 'vue3-super-flow'
import 'vue3-super-flow/lib/vue3-super-flow.css'
```
```javascript
<template>
<SuperFlow :nodes="nodes" :edges="edges"></SuperFlow>
</template>
<script>
export default {
data() {
return {
nodes: [
{ id: '1', label: '节点1', x: 100, y: 100 },
{ id: '2', label: '节点2', x: 300, y: 100 }
],
edges: [
{ id: '1-2', source: '1', target: '2' }
]
}
},
components: {
SuperFlow
}
}
</script>
```
这段代码中，我们使用SuperFlow组件，并将nodes和edges数据传递给组件。

nodes 数组表示节点数据，edges数组表示连线数据。

在这里我们只有两个节点和一条连线。

节点数据格式：
* id：节点的唯一标识，必须
* label：节点的文本，可选
* x、y：节点的初始位置，可选
* id：连线的唯一标识，必须
* source：连线的起点节点的id，必须
* target：连线的终点节点的id，必须
如果我们需要监听节点或连线的拖动或连接事件，可以通过绑定组件的output事件实现：
其中output事件返回一个对象，该对象包含两个属性：
* type：事件类型，值可能是'NODE_DRAG'、'EDGE_DRAG'、'EDGE_CONNECTED'、
'EDGE_DISCONNECTED'
* data：事件附带的数据，数据格式因事件类型不同而不同
组件属性
下面是SuperFlow组件支持的全部属性：
| 属性名 | 类型 | 默认值 | 说明 |
| ---- | ---- | ---- | ---- |
| nodes | Array | [] | 节点数据 |
| edges | Array | [] | 连线数据 |
| mode | String | 'default' | 组件模式：'default'（默认模式）、'edit'（编辑模式） |
| editable | Boolean | false | 是否可编辑 |
| dragConnectionPointRadius | Number | 5 | 连接点半径 |
| dragConnectionPointColor | String | '#1890ff' | 连接点颜色 |
| dragConnectionLineColor | String | '#1890ff' | 连接线颜色 |
| dragConnectionLineWidth | Number | 2 | 连接线宽度 |
上面表格中的属性可能不太好理解，我们来看一下各属性的作用。

nodes与edges属性已经在上面介绍过了，这里不再赘述。

mode属性可选项：'default'、'edit'，它们的作用如下：
* default：默认模式，不显示节点与连线的拖动、连接状态
* edit：编辑模式，可以通过拖动节点或起点、终点连接两个点
editable属性表示是否可编辑，当editable为true时，可以拖动节点以及连接、断开连线，false则无法操作。

dragConnectionPointRadius、dragConnectionPointColor、dragConnectionLineColor、dragConnectionLineWidth则是控制拖动连接状态下的连接点与连线样式。

另外，除了已经提到的output事件，SuperFlow组件还支持其他事件：
| 事件名 | 说明 |
| ---- | ---- |
| nodeClick | 节点被点击 |
| edgeClick | 连线被点击 |
| nodeDblclick | 节点被双击 |
| edgeDblclick | 连线被双击 |
| nodeDelete | 节点被删除 |
| edgeDelete | 连线被删除 |
如果需要获取当前流程图的节点与连线信息，可以调用SuperFlow组件的getOutput 方法，该方法返回一个包含节点与连线信息的数据对象：
```javascript
let outputData = this.$refs.superFlow.getOutput();
```
其他方法
| 方法名 | 说明 |
| ---- | ---- |
| autoLayout | 自动布局，将节点按读取方向自动排列布局 |
| resetLayout | 重置布局，还原原始布局信息 |
| zoomIn | 放大 |
| zoomOut | 缩小 |
| actualSize | 实际大小 |
以上方法都是组件实例方法，需要先获取组件实例再调用。

完整示例
下面是一个完整的示例：
export default {
components: {
SuperFlow
},
data() {
return {
nodes: [
{ id: '1', label: '节点1', x: 80, y: 100 }, { id: '2', label: '节点2', x: 350, y: 100 }, { id: '3', label: '节点3', x: 150, y: 200 } ],
edges: [
{ id: '1-2', source: '1', target: '2' },
{ id: '2-3', source: '2', target: '3' }
],
mode: 'default'
}
},
methods: {
onOutput({ type, data }) {
switch(type) {
case 'NODE_DRAG':
console.log('节点拖动', data);
break;
case 'EDGE_DRAG':
console.log('连接线拖动', data);
break;
case 'EDGE_CONNECTED':
console.log('连线连接', data);
break;
case 'EDGE_DISCONNECTED':
console.log('连线断开', data);
break;
}
},
onNodeClick(event) {
console.log('nodeClick:', event.data); },
onNodeDblclick(event) {
console.log('nodeDblclick', event.data); this.mode = 'edit';
}
}
}
</script>
这个示例里有以下特点：
1. 展示了如何将SuperFlow组件嵌入到页面中
2. 定义了节点和连线数据
3. 可以通过事件监听节点和连线的点击、双击、拖动、连接、断开等事件
4. 设置了初始的组件模式，快捷键'F2'切换到编辑模式
5. 在浏览器控制台输出SuperFlow组件输出的节点和连线数据
最后，需要大家注意，SuperFlow组件是对状态进行了统一控制，并且对鼠标事件进行了重新封装，但是最终渲染时还是使用组件自身的模板部分，所以，你可以查看源代码学习其实现方式。