LogicFlow 在 React/Vue 中的完整安装使用指南

以下是 LogicFlow 在 React/Vue 中的完整安装使用指南，包含 核心配置 与 实战示例：

一、基础安装

# 核心库安装
npm install @logicflow/core --save

扩展插件（按需）

npm install @logicflow/extension --save # 包含选区、小地图等
二、核心使用步骤

1. 创建实例

#javascript 
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css"; // 必须引入样式// 初始化配置
const lf = new LogicFlow({container: document.getElementById("container"), // 容器IDgrid: true,  // 显示网格keyboard: { enabled: true }  // 启用键盘快捷键
});// 渲染画布
lf.render();

2. 核心概念
   Node：基础节点（矩形/圆形等）

Edge：连接线（直线/折线等）

Data Driven：通过 lf.render(jsonData) 驱动视图

三、React 集成示例

#jsx 
// LogicFlowReact.jsx
import { useEffect, useRef } from 'react';
import LogicFlow from '@logicflow/core';export default function FlowDiagram() {const containerRef = useRef(null);useEffect(() => {const lf = new LogicFlow({container: containerRef.current,width: 800,height: 600});// 示例数据lf.render({nodes: [{ id: '1', type: 'rect', x: 100, y: 100 },{ id: '2', type: 'circle', x: 300, y: 200 }],edges: [{ sourceNodeId: '1', targetNodeId: '2', type: 'line' }]});}, []);return <div ref={containerRef} className="flow-container" />;
}

四、Vue 集成示例

#vue 
<!-- LogicFlowVue.vue -->
<template><div ref="container" class="flow-container"></div>
</template><script>
import LogicFlow from '@logicflow/core';export default {mounted() {const lf = new LogicFlow({container: this.$refs.container,isSilentMode: false // 开启交互模式});// 注册自定义节点lf.register({type: 'custom-node',model: { /* 模型定义 */ },view: { /* 视图定义 */ }});lf.render({nodes: [{ id: 'node1', type: 'custom-node', x: 150, y: 150 }]});}
};
</script>

五、高级功能实现

1. 使用插件

#javascript 
import { Control, MiniMap } from "@logicflow/extension";// 配置中启用
const lf = new LogicFlow({plugins: [Control, MiniMap],// ...其他配置
});
2. 事件监听
javascript
复制
lf.on('node:click', ({ data }) => {console.log('点击节点:', data);
});lf.on('connection:not-allowed', ({ data }) => {alert(`禁止连接: ${data.sourceId} -> ${data.targetId}`);
});

六、实战案例 - 审批流设计器

#javascript// 定义审批节点类型
lf.register('approval-node', {model: {initNodeData() {return {width: 120,height: 60,properties: { status: 'pending' }};}},view: {onThemeChange(node, theme) {// 根据状态改变颜色const { status } = node.properties;return { fill: status === 'approved' ? '#90EE90' : '#FFB6C1' };}}
});// 渲染审批流
lf.render({nodes: [{ id: 'start', type: 'approval-node', x: 100, y: 100 },{ id: 'manager', type: 'approval-node', x: 100, y: 250 }],edges: [{ sourceNodeId: 'start', targetNodeId: 'manager',properties: { label: '提交至部门经理' }}]
});

七、常见问题解决
容器未找到错误

确保 DOM 已渲染完成后再初始化

Vue 使用 this.$nextTick() 包裹初始化代码

样式不生效

#javascript 
// 在入口文件额外引入
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css'; 
节点拖拽失效javascript
复制
new LogicFlow({stopScrollGraph: true,  // 禁止画布滚动stopZoomGraph: true     // 禁止缩放
});

最佳实践：建议配合 @logicflow/example 官方示例库进行调试，使用 Chrome 开发者工具的 Performance 面板分析交互性能。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！