LogicFlow插件使用前准备详解

更新时间：2023年01月29日 11:19:40 作者：小鑫同学

这篇文章主要为大家介绍了LogicFlow插件使用前准备详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

进入正题

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制

LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

这一节将讲解快速上手 LogicFlow 流程图编辑框架的插件用前准备工作，项目整体基于Vue3+Vite3+Ts4开发，为帮助还为熟练使用 Vue3 和 Typescript 语法的小伙伴提供便利，如果你已经很熟练在Vue3中的开发习惯，建议直接访问 LogicFlow 将获取完整的入门指南。

1. 安装插件扩展模块：

当你真的需要用到插件的功能时可以安装下面这个模块，每个模块各司其职：

npm i @logicflow/extension

2. 注册插件到全局或实例

插件的注册分为两种，分别是注册到全局和注册到实例，这个就需要按你业务的实际需要来设置了：

注册到全局：将如下的代码安装到 Vue 的 main.ts 入口文件中即可

import { BpmnElement } from '@logicflow/extension';
LogicFlow.use(BpmnElement);

注册到实例：将扩展包在LF对象实例化后，将需要用到的插件通过 plugins 注册

import LogicFlow from "@logicflow/core";
import { DndPanel, SelectionSelect, Group } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";

const lf = new LogicFlow({
  container: document.querySelector("#app"),
  grid: true,
  plugins: [DndPanel, SelectionSelect, Group]
});

总结

这一节的内容就到此结束了，本小节内容简单，主要是为了提供一份可以为后续内置插件和自定义插件的使用提供一份可以fork的代码仓库，本节源码将使用注册到实例的方式操作，搞定后就马上要开始插件部分的学习了~

以上就是LogicFlow插件使用前准备详解的详细内容，更多关于LogicFlow插件用前准备的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

利用Vue.js指令实现全选功能
最近做了两个vue的项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。下面就来介绍如何利用指令来实现全选。
2016-09-09
Vue组件之间的数据共享详解
这篇文章主要为大家介绍了Vue组件之间的数据共享，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
vue基础之模板和过滤器用法实例分析
这篇文章主要介绍了vue基础之模板和过滤器用法,结合实例形式分析了vue模板与过滤器的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
2019-03-03
vue中ref实现子向父传值的示例
本文主要介绍了vue中ref实现子向父传值的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
利用Electron简单撸一个Markdown编辑器的方法
这篇文章主要介绍了利用Electron简单撸一个Markdown编辑器的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
利用Vue+ElementUi实现评论功能
这篇文章主要介绍了如何利用Vue+ElementUi实现评论功能,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-04-04
vuex 第三方包实现数据持久化的方法
本文主要介绍了vuex 第三方包实现数据持久化的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue3项目keepAlive使用方法详解
keepalive是Vue的内置组件,作用是将组件缓存在内存当中,防止重复渲染DOM,属于消耗内存获取速度,这篇文章主要介绍了vue3项目keepAlive使用方法,主要将keepaliev在vue3.0中的用法,需要的朋友可以参考下
2024-03-03
vue 基于abstract 路由模式实现页面内嵌的示例代码
这篇文章主要介绍了vue 基于abstract 路由模式实现页面内嵌的示例代码，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
vue中使用render封装一个select组件
这篇文章主要介绍了vue中使用render封装一个select组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09