vue-flow 是一个 vue 组件，用来做流程脑图，功能强大灵活，使用人数众多。下面我们来具体介绍如何使用，并会封装成代码组件，可以直接复制使用。
一、官网
首先可以去看官网文档，懒得看或时间紧迫得可以跳过，直接看下面。
官方文档
二、安装包
主要有以下几个包，当然除了@vue-flow/core 其他包都属于工具包，后面讲解
yarn add
@vue-flow/core
@vue-flow/background
@vue-flow/controls
@vue-flow/minimap
@vue-flow/node-toolbar三、实际使用
不废话，直接上代码：
<template>
<VueFlow
:node-types="nodeTypes"
v-model:nodes="nodes"
v-model:edges="edges"
@pane-ready="onPaneReady"
@node-click="onNodeClick"
@node-drag-stop="onNodeDrag"
@edge-click="onEdgeClick"
@pane-click="onPaneClick"
@connect="onConnect"
:connection-line-style="{ stroke: '#4a90e2', strokeWidth: 2 }"
:default-edge-options="{type: 'smoothstep',style: { stroke: '#4a90e2', strokeWidth:2 }}"
fit-view-on-init>
<Background variant="lines" pattern-color="#e5e5e5" gap="20" :size="1" />
<Controls />
<MiniMap />
</VueFlow>
</template>
<script setup>
import { ref } from "vue"
import { VueFlow, useVueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import { Controls } from '@vue-flow/controls';
import { MiniMap } from '@vue-flow/minimap';
import CustomNode from './CustomNode.vue';
//一些可用得内置api
const { addNodes, addEdges, fitView, toObject, project, setNodes, setEdges } = useVueFlow();
//核心样式
import '@vue-flow/core/dist/style.css';
//主题样式
import '@vue-flow/core/dist/theme-default.css';
//控制按钮样式
import '@vue-flow/controls/dist/style.css';
const nodes = ref([
{
id: '1',
type: 'custom',
position: { x: 100, y: 100 },
data: {
label: '开始',
color: '#2ecc71',
fontSize: 12,
size: 'medium'
},
label: '开始de ',
style: {
background: '#16baaa',
color: '#fff',
fontSize: '12px'
}
},
{
id: '2',
type: 'custom',
position: { x: 400, y: 100 },
data: {
label: '处理数据',
color: '#4a90e2',
fontSize: 12,
size: 'medium'
},
label: '处理数据',
style: {
background: '#16baaa',
color: '#fff',
fontSize: '12px'
}
},
{
id: '3',
type: 'custom',
position: { x: 700, y: 100 },
label: '结22束',
data: {
label: '结束',
color: '#4a90e2',
fontSize: 12,
size: 'medium'
},
style: {
background: '#16baaa',
color: '#fff',
fontSize: '12px'
}
}
]);
const nodeTypes = ref({
custom: CustomNode,
input: CustomNode,
output: CustomNode,
default: CustomNode,
custom1: {
template: `<div class="custom-node">{{ node.label }}44</div>`,
style: { background: '#ff9', border: '2px solid #f90' }
}
});
const edges = ref([
{
id: 'e1-2',
source: '1',
target: '2',
type: 'default',
label: '进阶思考',
style: {
stroke: '#16baaa',
strokeWidth: 1
},
markerEnd: {
type: 'arrowclosed',
color: '#16baaa'
}
},
{
id: 'e2-3',
source: '2',
target: '3',
type: 'smoothstep',
style: {
color: '#16baaa',
strokeWidth: 1
},
markerEnd: {
type: 'arrowclosed',
color: '#16baaa'
}
}
]);
const onConnect = (params) => {
const newEdge = {
...params,
id: `edge-${Date.now()}`,
type: 'smoothstep',
style: {
stroke: '#16baaa',
strokeWidth: 1
},
markerEnd: {
type: 'arrowclosed',
color: '#16baaa'
}
};
addEdges([newEdge]);
};
</script>四、详细介绍
为了适应需求，我们不能直接拿这个例子去使用，而是要理解vue-flow得具体配置细节，然后再去修改成我们需要得场景。
几个概念
4.1 nodes :节点
vue-flow 双向绑定得节点对象，传入一个节点列表，即可显示节点。节点对象解构如下：
{
id: '1',//id 唯一值 ，后面连接线需要使用
type: 'CustomNode',//节点类型，默认不填，可以填写自己定义得组件 如 CustomNode
position: { x: 100, y: 100 },//节点位置
data: {
label: '开始',//传给节点里面得属性值，类似于props
color: '#2ecc71',
fontSize: 12,
size: 'medium'
},
label: '开始de ',//节点标题
style: {//节点样式
background: '#16baaa',
color: '#fff',
fontSize: '12px'
}
}4.2 edges:连接线
当有多个节点时，就需要将一条线连接两个节点，edges正是起到连接线得作用。连接线解构如下：
{
id: 'e1-2',//唯一id值，后面会使用到
source: '1',//连接线起点得 节点ID 对应上面node对象中得id
target: '2',//连接线终点得 节点ID 对应上面node对象中得id
type: 'default',//连接线得形状 默认是直线 可以选择弧线 smoothstep
label: '进阶思考',//连接线 中间得label
style: {//连接线具体样式
stroke: '#16baaa',//颜色
strokeWidth: 1//粗细
},
markerEnd: {
type: 'arrowclosed',//连接线得尾部icon 默认是箭头
color: '#16baaa',//连接线得尾部颜色
}
},掌握了node 和 edge两个核心对象，其实整个vue-flow 得结构就很简单了，核心逻辑就是 从A 节点连线到B 节点
4.3 nodeTypes
配置 节点得类型，比如上面案例使用到了自定义组件CustomNode，需要在nodetypes 中进行配置
{
custom: CustomNode,
input: CustomNode,//入节点类型
output: CustomNode,//出节点类型
default: CustomNode,//默认
custom1: {//直接使用模板，这里未使用
template: `<div class="custom-node">{{ node.label }}44</div>`,
style: { background: '#ff9', border: '2px solid #f90' }
}
}4.4 自定义节点
这里贴出自定义节点CustomNode
<script setup>
import { Position, Handle } from '@vue-flow/core';
import { NodeToolbar } from '@vue-flow/node-toolbar';
const props = defineProps(['data']);
</script>
<template>
<div>
<Handle type="target" :position="Position.Top" />
<Handle type="source" :position="Position.Bottom" />
<div>
color: props.data.color }" -->
<div>{{ props.data.label }}</div>
</div>
</div>
</template>4.5 Handle ：连接点
一个节点一共有四个连接点 分别处于 节点得上下左右边中心位置，设置自定义节点组件时候，需要定义后 soure 和 target 即 起始连接线位置 和 终点连接线位置
<Handle type="target" :position="Position.Top" />
<Handle type="target" :position="Position.Bottom" />
<Handle type="target" :position="Position.Left" />
<Handle type="target" :position="Position.Right" />4.6 MiniMap、Background、 Controls等组件
这三个都是内置得工具，
MiniMap：右下角会显示整个流程缩略图 Background：可以让流程图背景变成小方格 Controls：左下角出现控制按钮 NodeToolbar：自定义右键工具包，暂未使用
具体使用细节可以参考官网，都属于辅助功能
五、实战案例
参考网站
以上代码直接复制即可使用，有理解得 或者 有问题得欢迎留言。
原文地址
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
