超简单！vue-pure-admin流程图拖拽连接全攻略

【免费下载链接】vue-pure-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pure-admin

你还在为流程图节点拖拽卡顿、连接线错乱发愁吗？本文将带你一文掌握vue-pure-admin中ReFlowChart组件的核心用法，从节点拖拽到连接逻辑实现，让你轻松搭建专业级流程图应用。读完你将学会：

• 3分钟上手流程图组件的基础配置
• 节点拖拽与属性自定义技巧
• 连接线自动吸附的实现原理
• 实战案例：从0构建审批流程界面

组件架构解析

ReFlowChart作为vue-pure-admin的核心可视化组件，采用模块化设计，主要包含三大功能模块：

核心文件结构

src/components/ReFlowChart/index.ts文件定义了三个核心子组件：

• Control：流程图控制面板，提供缩放、撤销、下载等操作
• NodePanel：节点选择面板，支持拖拽创建节点
• DataDialog：数据查看对话框，展示流程图JSON数据

组件注册采用withInstall方法，确保在Vue项目中可按需引入：

import { withInstall } from "@pureadmin/utils";
const Control = withInstall(control);
const NodePanel = withInstall(nodePanel);
const DataDialog = withInstall(dataDialog);

组件关系图

节点拖拽实现

节点拖拽是流程图最基础也最核心的功能，ReFlowChart通过LogicFlow的拖拽API实现了流畅的节点交互体验。

拖拽面板实现

src/components/ReFlowChart/src/NodePanel.vue组件通过mousedown事件触发拖拽逻辑：

const nodeDragNode = item => {
  props.lf.dnd.startDrag({
    type: item.type,
    properties: unref(properties)
  });
};

模板中通过循环渲染可拖拽节点列表：

<div 
  v-for="item in nodeList"
  :key="item.text"
  class="node-item"
  @mousedown="nodeDragNode(item)"
>
  <div :class="item.class" />
  <span class="node-label">{{ item.text }}</span>
</div>

节点类型配置

src/components/ReFlowChart/src/config.ts定义了两种节点类型集合：

• nodeList：基础流程图节点，包含开始、矩形、用户等6种类型
• BpmnNode：BPMN标准节点，包含开始事件、结束事件等4种类型

基础节点配置示例：

export const nodeList = [
  {
    text: "开始",
    type: "start",
    class: "node-start"
  },
  {
    text: "矩形",
    type: "rect",
    class: "node-rect"
  }
  // 更多节点类型...
];

连接线逻辑实现

流程图的灵魂在于节点间的连接关系，ReFlowChart通过LogicFlow内核实现了智能连接线功能。

控制面板操作

src/components/ReFlowChart/src/Control.vue提供了完整的流程图控制功能，包括：

• 缩放控制（放大/缩小/适应画布）
• 历史操作（撤销/重做）
• 导出功能（下载图片/查看数据）

核心控制逻辑：

const onControl = (item, key) => {
  ["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach(
    (v, i) => {
      if (key === i) {
        props.lf[v](); // 调用LogicFlow实例方法
      }
    }
  );
};

连接交互体验

ReFlowChart实现了以下连接特性：

1. 节点选中时自动显示连接点
2. 拖拽连接时实时预览连接线
3. 连接线自动吸附与路径优化
4. 双击连接线可编辑属性

这些特性通过LogicFlow的事件系统实现，关键事件包括：

• node:click：节点选中事件
• edge:click：连接线点击事件
• connection:start：连接开始事件
• connection:end：连接完成事件

实战应用案例

下面通过一个简单示例展示如何在项目中集成ReFlowChart组件。

基础使用代码

<template>
  <div class="flow-chart-container">
    <ReFlowChart>
      <NodePanel :nodeList="nodeList" />
      <Control />
      <DataDialog />
    </ReFlowChart>
  </div>
</template>

<script setup>
import { ReFlowChart, NodePanel, Control, DataDialog } from "@/components/ReFlowChart";
import { nodeList } from "@/components/ReFlowChart/src/config";
</script>

常见配置项

配置项	类型	说明	默认值
nodeList	Array	节点类型列表	基础节点集合
width	Number	画布宽度	100%
height	Number	画布高度	600px
grid	Boolean	是否显示网格	true
snapToGrid	Boolean	是否吸附网格	true

效果展示

节点拖拽面板提供了直观的节点选择界面，用户可以轻松拖拽不同类型的节点到画布，并通过鼠标连接节点创建流程图。控制面板支持缩放、下载等常用操作，满足流程图设计的基本需求。

高级功能扩展

ReFlowChart基于LogicFlow内核，支持丰富的扩展功能：

自定义节点

通过继承BaseNode可以创建自定义节点类型：

import { BaseNode } from "@logicflow/core";

class CustomNode extends BaseNode {
  // 自定义节点逻辑
}

lf.register(CustomNode);

数据持久化

通过lf.getGraphData()方法可获取流程图JSON数据，便于保存到后端：

const graphData = lf.getGraphData();
// 发送到后端保存
api.saveFlowData(graphData);

事件监听

监听流程图各种事件实现业务逻辑：

lf.on("node:click", (event) => {
  console.log("节点被点击", event.data);
});

lf.on("edge:added", (event) => {
  console.log("新连接线创建", event.data);
});

总结与展望

ReFlowChart组件为vue-pure-admin提供了强大的流程图绘制能力，通过本文的介绍，你已经掌握了节点拖拽、连接创建等核心功能的实现原理。随着业务需求的发展，未来还可以扩展更多高级特性：

• 节点动画与过渡效果
• 多人协作编辑功能
• 流程图模板库
• 导出多种格式文件（PNG/SVG/PDF）

希望本文对你使用ReFlowChart组件有所帮助，如果觉得有用，别忘了点赞收藏关注三连！下期我们将介绍如何基于ReFlowChart实现审批流程设计器，敬请期待。

【免费下载链接】vue-pure-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pure-admin