vue3中使用logicFlow的方法代碼示例
更新時(shí)間：2024年10月21日 09:44:10 作者：沐風(fēng)拂千漁
在Vue3環(huán)境下,使用LogicFlow可實(shí)現(xiàn)流程圖的繪制,詳細(xì)步驟包括引入LogicFlow庫,注冊(cè)節(jié)點(diǎn)與邊,設(shè)置主題和渲染數(shù)據(jù),還包括使用Map和Menu進(jìn)行功能擴(kuò)展和右鍵編輯,以及通過事件監(jiān)聽實(shí)現(xiàn)交互,
淺結(jié)logicFlow使用：
應(yī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)文章
這篇文章主要介紹了Vue父子組件傳值問題，文章中有詳細(xì)的示例代碼，感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要介紹了Vue中的項(xiàng)目打包及部署全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue實(shí)現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果實(shí)例代碼
本文通過一段簡單的代碼給大家介紹了基于純vue實(shí)現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果，代碼很簡單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼
這篇文章主要介紹了vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟
這篇文章主要給大家介紹了關(guān)于如何快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要介紹了Vue3之修改端口號(hào)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置(推薦)
這篇文章主要介紹了使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
websocket+Vuex實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天軟件
這篇文章主要利用websocked 建立長連接，利用Vuex全局通信的特性，以及watch,computed函數(shù)監(jiān)聽消息變化，并驅(qū)動(dòng)頁面變化實(shí)現(xiàn)實(shí)時(shí)聊天，感興趣的可以了解一下2021-08-08
在Vue3項(xiàng)目中集成CodeMirror創(chuàng)建SQL編輯器的方法詳解
在這篇文章中,我們將學(xué)習(xí)如何在 Vue 3 項(xiàng)目中集成 CodeMirror,以創(chuàng)建一個(gè)支持 SQL 語法高亮和自動(dòng)補(bǔ)全的代碼編輯器,需要的朋友可以參考下2025-04-04