VueFlow入门

什么是 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,
    },
  }
])

 

节点类型（type:）：default、input（只有输出）、output（只有输入）