欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中使用logicFlow的方法代碼示例

 更新時(shí)間：2024年10月21日 09:44:10   作者：沐風(fēng)拂千漁  
在Vue3環(huán)境下,使用LogicFlow可實(shí)現(xiàn)流程圖的繪制,詳細(xì)步驟包括引入LogicFlow庫(kù),注冊(cè)節(jié)點(diǎn)與邊,設(shè)置主題和渲染數(shù)據(jù),還包括使用Map和Menu進(jìn)行功能擴(kuò)展和右鍵編輯,以及通過(guò)事件監(jiān)聽實(shí)現(xiàn)交互,

淺結(jié)logicFlow使用：

應(yīng)用場(chǎng)景：vue3中使用logicFlow繪制流程圖
技術(shù)碎片應(yīng)用：
vue3：ref,reactive, onMounted, watchEffect,nextTick,inject
logicFlow：節(jié)點(diǎn)，邊，錨點(diǎn)，事件

官網(wǎng)：logicFlow

1.引入下載LogicFlow

npm install @logicflow/core
npm install @logicflow/extension

import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";

2.使用

<div id="simpleCircles" ref="container"></div>

const lf=new LogicFlow({
        container: document.querySelector("#simpleCircles"),
        grid: true,
        plugins: [], //MiniMap, Menu等的使用
 })

注冊(cè)，節(jié)點(diǎn)，邊

  lf.register(customNode);   //自定義節(jié)點(diǎn)
  lf.register(customEdge);   //自定義邊

設(shè)置主題

lf.setTheme({
        bezier: {
            stroke: "#000000",
            strokeWidth: 1,
        },
 });

渲染數(shù)據(jù)

lf.render(data);

3.引入使用map

import { Menu，MiniMap} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";

plugins: [MiniMap],
lf.extension.miniMap.show(860, 0)

4.引入使用Menu

import { Menu，MiniMap} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";

  plugins: [Menu],

右鍵編輯菜單

 lf.extension.menu.setMenuConfig({
            nodeMenu: [],
            edgeMenu: [],
            graphMenu: [],
  });

5.事件編輯監(jiān)聽

 lf.on("history:change", ({ data }) => {
 });

節(jié)點(diǎn)node   邊 edge

"node:dbclick"  //雙擊
"edge:add"  //添加
"edge:click"  //單擊
"edge:mouseleave" //鼠標(biāo)移出
history:change

最終可實(shí)現(xiàn)繪制出滿足需求的多單節(jié)點(diǎn)多錨點(diǎn)連線(邊)。

類似效果圖：

總結(jié)

到此這篇關(guān)于vue3中使用logicFlow的文章就介紹到這了,更多相關(guān)vue3使用logicFlow內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論