用Vue Flow绘制一个完美流程图

最新推荐文章于 2025-12-04 12:08:51 发布

原创最新推荐文章于 2025-12-04 12:08:51 发布 · 1.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #流程图 #前端

该文章已生成可运行项目，

Vue Flow 简介

Vue Flow 是一个基于 Vue.js 的流程图库，专为构建交互式流程图设计。它支持节点拖拽、连线、缩放、撤销/重做等功能，适用于工作流、系统架构图等场景。以下内容将演示如何用 Vue Flow 绘制一个完整的流程图，并提供代码示例。

安装与基础配置

确保项目已安装 Vue 3，使用以下命令安装 Vue Flow：

npm install @vue-flow/core

基础配置示例：

<template>
  <VueFlow v-model="elements" />
</template>

<script>
import { VueFlow } from '@vue-flow/core';

export default {
  components: { VueFlow },
  data() {
    return {
      elements: [
        { id: '1', position: { x: 0, y: 0 }, data: { label: '节点1' } },
        { id: '2', position: { x: 200, y: 100 }, data: { label: '节点2' } },
        { id: 'e1-2', source: '1', target: '2' },
      ],
    };
  },
};
</script>

自定义节点与样式

通过 node-types 自定义节点类型，并添加样式：

<template>
  <VueFlow 
    v-model="elements" 
    :node-types="nodeTypes" 
    :default-edge-options="{ type: 'step' }"
  />
</template>

<script>
import { VueFlow } from '@vue-flow/core';

export default {
  components: { VueFlow },
  data() {
    return {
      elements: [
        { 
          id: '1', 
          type: 'custom', 
          position: { x: 0, y: 0 }, 
          data: { label: '开始' } 
        },
        { 
          id: '2', 
          position: { x: 200, y: 100 }, 
          data: { label: '处理' } 
        },
        { id: 'e1-2', source: '1', target: '2' },
      ],
      nodeTypes: {
        custom: {
          template: `<div class="custom-node">{{ node.data.label }}</div>`,
          style: { background: '#ff9', border: '2px solid #f90' },
        },
      },
    };
  },
};
</script>

<style>
.custom-node {
  padding: 10px;
  border-radius: 5px;
}
</style>

交互功能实现

添加拖拽、连线事件和撤销/重做功能：

<template>
  <VueFlow 
    v-model="elements" 
    @node-drag="onNodeDrag"
    @connect="onConnect"
  />
  <button @click="undo">撤销</button>
  <button @click="redo">重做</button>
</template>

<script>
import { VueFlow, useVueFlow } from '@vue-flow/core';

export default {
  components: { VueFlow },
  setup() {
    const { undo, redo } = useVueFlow();
    return { undo, redo };
  },
  data() {
    return {
      elements: [...],
    };
  },
  methods: {
    onNodeDrag(event, node) {
      console.log('节点移动:', node.id);
    },
    onConnect(connection) {
      this.elements.push({
        id: `e${connection.source}-${connection.target}`,
        source: connection.source,
        target: connection.target,
      });
    },
  },
};
</script>

高级功能：动态数据与布局

结合外部数据生成流程图，并自动布局：

<template>
  <VueFlow v-model="elements" :fit-view-on-init="true" />
</template>

<script>
import { VueFlow } from '@vue-flow/core';
import { getLayoutedElements } from './layout.js'; // 假设有布局算法

export default {
  components: { VueFlow },
  data() {
    return {
      elements: getLayoutedElements([
        { id: '1', data: { label: '步骤1' } },
        { id: '2', data: { label: '步骤2' } },
        { id: 'e1-2', source: '1', target: '2' },
      ]),
    };
  },
};
</script>