Vue 你想要的流程圖

好一手BGM發表於2019-04-17
Vue流程圖

引言：

由於專案業務的需求，前端需要支援後臺流程圖適配 其實很扯淡哈哈 第一次在掘金髮文 不喜歡勿噴哈 也歡迎大家指教
複製程式碼

模組簡介 廢話不多說 先上圖在解釋

Vue 你想要的流程圖

Vue 你想要的流程圖

專案實際用到的技術棧：SVG + vue + vuex

功能介紹：

畫布縮放

節點( 開始,基礎,判斷等 )新增，刪除

節點間連線( 直線/折線 )

文字新增

外部匯入SVG圖形

撤銷與重做
複製程式碼

節點相關 npm i @antv/g6-editor --save 下載antv 依賴

import G6Editor from '@antv/g6-editor';

約定容器
<div id="minimap"></div>       <!-- 縮圖 DOM 結構規約參考 Minimap API -->
<div id="toolbar"></div>       <!-- 工具欄 DOM 結構規約參考 Toolbar API --> 
<div id="itempannel"></div>    <!-- 元素皮膚欄 DOM 結構規約參考 Itempannel API -->
<div id="detailpannel"></div>  <!-- 詳情皮膚欄 DOM 結構規約參考 Detailpannel API -->
<div id="contextmenu"></div>   <!-- 右鍵選單欄 DOM 結構規約參考 Contextmenu API -->
<div id="page"></div>          <!-- 參考 Flow、Mind API -->
生成對應的模組
複製程式碼

Vue 你想要的流程圖

導航的編輯可以參考 我省略了部分功能

Vue 你想要的流程圖

資料格式為JSON

json格式
複製程式碼

Vue 你想要的流程圖

儲存方法為saveData
複製程式碼

Vue 你想要的流程圖

初始化讀取後臺資料的話需要呼叫API

Vue 你想要的流程圖
editor.read()該方法由介面讀取資料

參考文件 www.yuque.com/antv/g6-edi…

專案程式碼地址 github.com/zhouping920…

歡迎指正 下載專案有啥問題可以@我 哈哈 覺得OK的 別忘了start

相關文章