LogicFlow插件-常用&内置

最新推荐文章于 2025-03-16 00:15:00 发布

前端小鑫同学

最新推荐文章于 2025-03-16 00:15:00 发布

阅读量3.3k

点赞数 8

分类专栏： LogicFlow专栏文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/fesermon/article/details/128552956

版权

🎄Hi~ 大家好，我是小鑫同学，一位长期从事前端开发的编程爱好者，我将使用更为实用的案例输出更多的编程知识，同时我信奉分享是成长的唯一捷径，在这里也希望我的每一篇文章都能成为你技术落地的参考~

1. 准备工作：

1. 初始化项目：

1.1 初始化环境：

使用pnpm create vite创建项目，选择Vue框架及TypeScript变体；

1.2 安装核心模块：

在完成了前面的准备工作后，需要安装非核心的插件依赖模块：

pnpm add @logicflow/core
pnpm add @logicflow/extension

2. 插件注册：

2.1 注册插件到全局：

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

2.2 注册插件到实例：

import LogicFlow from "@logicflow/core";
import {
    DndPanel, SelectionSelect } 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]
});

2. 配置拖拽面板 DndPanel：

拖拽面板的插件安装完成后就可以为拖拽面板添加元素了，也就是被拖拽的内容，每个元素都具备以下7个可选选项进行控制：

名称	类型	描述
type	string	指定用户鼠标可以拖入的节点类型，包括自定义节点类型，不传则不会创建节点，只会触发callback
text	string	创建节点的文本
properties	object	创建节点的properties
label	string	拖拽面板节点文本描述
icon	string	拖拽面试上显示的图标，可以传入图标url地址或base64编码
className	string	额外传入可以拖拽项的class, 用于自定义拖拽项的样式
callback	fn	用户鼠标按下拖拽项后触发的回调

<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import {
    DndPanel } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";

import {
    onMounted, ref } from "vue";

const container = ref();
const lf = ref<LogicFlow>();

const patternItems = [
    {
   
      type: 'circle',
      text: '开始',
      label: '开始节点',
      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAABQVJREFUWEfNWF1oHFUU/s5sUhVTyc5GUBqlpDObWol9UYr2webNIqQgQrA1LdZgsjNNpBZbsQHrTy2VaqXdnU2qVhEsgpW2CmkFSQtqffGvNBKT2QYLUhCzs9EoKN2ZI3d2NzvZ7M9ksxEH9mXvOd/55tw7557vEKp8moZ+vt120i0SuIWZwyBaDYcCAE8yMEmgyfrlDV/8uvW2v6oJQQtxajz8fSMtu7kTRJ0EtPvyJRqGg/NSHY9M9ajf+fIB4ItY4+DkWsm2uyChE4xmD/iomx3GFEk0Jf5nh5uY0ESglQDf47FNA4jaaUR/71evVCJYkVjIMHUmvASG7AYGvpWYTzmSdCYVUUbLBbg1llAcwkYGbwQgfgIhCeaopbfuK+dblpgcT5wA82M5QgAdS2nKsUpvW2xdjo13gqQ+AOvFOgGfJjW1oxRWSWJyPHEVzHe6IEwDSV3ZXw2hQp9QLLGXiV/J/n/N0tQVxXCLEpONiR8AWpvJFG9JaeETtSCVwwgaE5sJ9EFmZ/knSw/fVYg/j5gcN3eC8YYwtDS14hlcDGHZMDnr/6alqTu9WHMChwbNTezgtGvg4AFrh/r1YgJX8pWj5v2QcDGTOedF7wcxSyw4dKWN0s4wCM0gPGNF1MOVgGuxnt8hTtppWpcrJbPE5Jh5CIRdohykNPXeWgT1iyEb5pfZr3V2S11ioqJLNzZcFsWTQT1+SkJjfGwloW4Xk/P2dG/rJb8kypSSDwGkpQDWiRvCJRaMTfQQ0eBCsiXHxveBpBcATDI721J6q3jrqh/ZMM8CeChXmjLEDHNE3H3MvD+lhwf8oHuIiWL5GzNttXTlnB/fYjbBmPkcEQ4wcCGlqe0Uio+vYJZ+EcaSJN031bvqGz/gXmJZ+78hBbqs3paTfvwLbeRBcw0c/OjymLFvocaj5gYpgPMAxixNXeMXtAixrCtvt7Twu35xvHayYYq7924wbSTZMLsBvMXAJylN3eQXsDQxcQ9Sf1JTjvrFytkFDfMMAR3M0CkUmzjIRLvBOG7p6pN+wcoRExgEPJ/U1AN+8YSdHDPfAWE7GK+TbCQ+BvgRInotGVH2+AWqREzgODbap/vUC34xQ/HEQWbeDaZTJMfNj8B4dCmIEfMTST38XnXEjImXARqo9VaC6HK6/oYNf3TfYfklNmcrQ3Gzixnv1/LwA7joLAtsnu5uueqXVLae5g9/MJ5YT8yiao9amtrmF6jMGfvsunPTlpkdzUm/WDk72UhccnWCKBdChjn29WtikYnaKvXxsyD5Kykfn/mkbNPjiX71n4WSEvrAJjaFX33D8oY5VxIxDyT1sK8Wel7GCMetiP9yU0g8ZCT6GHwERMNWRHm4Fpc4QHTEiihPLzRLBVV/2FVSTM9aunKo6rYnaCSeI