1安装 npm install @logicflow/core npm install @logicflow/extension 2引入+使用 <template><el-container></el-container></template>import LogicFlow from'@logicflow/core'; import'@logicflow/core/dist/style/index.css'; exportdefault{ data() {return{ graphData: { nodes: [ { id:'1', type:...
一、介绍 LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。二、安装 直接npm安装就行 npm install ...
提供网格、对齐线，上一步、下一步，键盘快捷键，图放大缩小等配套能力，帮助用户提升编辑效率提供了丰富的 API ，宿主研发通过 API 传参调用和监听事件的方式，与 LogicFlow 完成交互 通过以上能力，前端研发可以低成本、快速的搭建起流程编辑的应用，提供流畅的产品交互。下面是通过 LogicFlow 内置的节点和配套能力...
分享一个最适合Vue 的流程图插件。 创建一个实例每一个流程设计界面,就是一个LogicFlow的实例。为了统一术语,我们后面统一在代码层面将 LogicFlow的实例写作lf。<style> #container { width: 1000px; heig…
声明式。比如 React/Vue 这类 View 框架,其中一个比较核心的能力就是做到了 state => UI ,通过声明式的方式来构建 DOM,只要状态发生变化,那 UI 就更新 除了考虑到命令式在操作 DOM 的场景下写代码会比较繁琐之外,还有一个原因就是操作 DOM 的成本问题,在基于 State 更新 UI 的设计下,我们自然而然想到了引...
LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景,如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。
有了LogicFlow组件之后，您现在可以在Vue3中使用它的API，一些常见的操作包括：添加节点、创建连线、布局等，这里我们以添加一个节点的示例展示使用 LogicFlow 的方法。调用如下的函数可以向 LogicFlow 添加一个节点：addNode() { this.lf.dnd.start(this.lf.node.create({ /* 节点参数 */ }));} 这个函数...
声明式。比如 React/Vue 这类 View 框架,其中一个比较核心的能力就是做到了 state => UI ,通过声明式的方式来构建 DOM,只要状态发生变化,那 UI 就更新 除了考虑到命令式在操作 DOM 的场景下写代码会比较繁琐之外,还有一个原因就是操作 DOM 的成本问题,在基于 State 更新 UI 的设计下,我们自然而然想到了引...
LogicFlow 是一款基于 Vue.js 的流程图编辑器组件,它可以帮助用户轻松地创建和定制各种流程图。这个组件提供了丰富的功能和灵活的配置选项,使得用户可以根据自己的需求定制出符合自己应用场景的流程图编辑器。 在使用 LogicFlow 的 Vue 案例中,我们可以利用其丰富的 API 和事件来实现各种功能,比如创建节点、连接节点、...
feat: release @logicflow/core & extension 2.0.0-beta.7, vue & react-no… 10个月前 .github chore: update package.json, add changesets to generate CHANGELOG 11个月前 .husky feat: 配置 husky pre-commit 1年前 .vscode feat: 移除本次迭代无用的代码,精简代码,优化结构 10个月前...