LogicFlow

LogicFlow

​ 由于工作需要，本人将 LogicFlow 实践了多次。因此写下本篇博客以此记录，希望能帮助到刚开始使用的小伙伴。

​ 官方回答：LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。 LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

LogicFlow 官网: https://site.logic-flow.cn/tutorial/about

我们先看看大概的布局

由图可见，可分为以下部分

名称	作用
左侧的拖拽组件选择栏	分为流程图模板和流程组件
中间的流程图	展示流程图的类型以及指向
右侧空白区域	右侧空白区域主要是某个流程节点相关的数据的输入，这里我没定义，看个人需求
顶部的小按钮	主要包括流程图的缩小，放大，撤销，回退，居中，清空等功能
提交按钮	主要是能拿到该流程图的数据以及流程图右侧输入的数据

LogicFlow 的 Vue 自定义节点

为什么使用自定义节点？因为使用 LogincFlow 原本的属性与 Api，很多复杂的操作都是实现困难甚至无法实现的。

Vue 的自定义节点建议使用 Vue3 进行操作，因为 Vue2 我没试过。

由上图可见，如果不通过自定义节点去实现，我们先不说难度的问题，就是代码你都要写冒烟

那又有人说了，你这个自定义节点有 4 个锚点，原生的也是 4 个，原生的可以自定义锚点个数以及锚点样式，线的样式等等，那自定义节点怎么弄？ 我不想要 4 个，我想要根据他的列生成多个锚点，或者我只希望他只有 2 个锚点，又或者说想要调整他其他的部分。ok,没问题，请看下图

这张图的代码我没集成进 GitHub，因为我后面会出一篇文章详细讲解 Vue3 自定义节点，原生的我就不再出文章了，大家看看官网得了。