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

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

一、基础安装

javascript 复制代码
# 核心库安装
npm install @logicflow/core --save

扩展插件(按需)

npm install @logicflow/extension --save # 包含选区、小地图等

二、核心使用步骤

  1. 创建实例
javascript 复制代码
#javascript 
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css"; // 必须引入样式

// 初始化配置
const lf = new LogicFlow({
  container: document.getElementById("container"), // 容器ID
  grid: true,  // 显示网格
  keyboard: { enabled: true }  // 启用键盘快捷键
});

// 渲染画布
lf.render();
  1. 核心概念
    Node:基础节点(矩形/圆形等)

Edge:连接线(直线/折线等)

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

三、React 集成示例

javascript 复制代码
#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 集成示例

javascript 复制代码
#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 复制代码
#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 复制代码
#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 复制代码
#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 面板分析交互性能。

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

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
市民中心的蟋蟀14 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
谦谦橘子15 小时前
服务端渲染原理解析
前端·javascript·react.js
ElasticPDF-新国产PDF编辑器15 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin16 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌17 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光17 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs17 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石17 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking19 小时前
解决 axios get请求瞎转义问题
vue.js