VueFlow入门-编程知识

VueFlow入门

news/2025/2/22 11:50:19/文章来源:https://www.cnblogs.com/yeyuqian/p/18730750

什么是 VueFlow

VueFlow 是一个专门为 Vue.js 设计的流程图和工作流构建库。它提供了丰富的 API 和组件，使得开发者可以轻松创建节点、边（连接线），并实现节点之间的交互。通过 VueFlow，我们可以构建出如工作流引擎、数据流程图、思维导图等各种复杂的可视化界面。

vuelow官网

安装 VueFlow

在开始使用 VueFlow 之前，我们需要先安装它。可以使用 npm 进行安装，打开终端并运行以下命令：

npm install @vue-flow/core
npm install @vue-flow/background //背景
npm install @vue-flow/minimap //小地图
npm install @vue-flow/controls //自带的缩放、居中、加锁功能
npm install @vue-flow/node-toolbar //工具栏
npm install @vue-flow/node-resizer //缩放

样式引用

import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'
import '@vue-flow/controls/dist/style.css'
import '@vue-flow/minimap/dist/style.css'

快速开始

<template><div class="flow-content" @drop="onDrop"><VueFlow v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init default-marker-color="#409EFF"@node-click="logEvent('click', $event)"@edge-click="logEvent('edge clicked', $event)"@connect="logEvent('connect', $event)"@selection-start="logEvent('selection111',$event)"@dragover="onDragOver"@dragleave="onDragLeave"><Background :size="1" :gap="20" pattern-color="#BDBDBD" /><MiniMap></MiniMap><Controls></Controls><Panel><el-card style="width: 150px;"><div class="flow-menu-div"><el-button class="menu-btn" type="primary" @click="onSave"><el-icon class="menu-icon" color="#ADFF2F"><CirclePlusFilled /></el-icon>菜单</el-button></div></el-card></Panel><template #node-tc="tcNodeProps"><TcNode v-bind="tcNodeProps" @CustomSettingOPen:value="openSetting" /></template></VueFlow></div>
</template>

edges：连接线数据
nodes：节点数据
fit-view-on-init：默认图居中
default-marker-color:连接线节点颜色

import { VueFlow, Panel, MarkerType } from '@vue-flow/core'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'
const nodes = ref([
{id: '1',type: 'default',data: { color: presets.ayame },position: { x: 0, y: 50 },},
{id: '2',type: 'default',data: { color: presets.ayame },position: { x: 0, y: 50 },}
])const edges = ref([
{id: 'e1a-2',source: '1',sourceHandle: 'a',target: '2',animated: true,style: {stroke: presets.ayame,},}
])