topology vue demo

topology-demo

基於topology + elemenu-ui + vue-cli的topology編輯器（僅供學習參考使用）

目前功能巨簡單，參考了幾個vue寫的關於topology的demo整合在一起，改成自己熟悉的樣子。 會持續維護，加入topology上的API實現

技術選型

• Vue-Cli
• Topology
• Element-ui

思路

大體的架子還是參照其他做得比較優秀的demo拽過來的，然後按照佈局分了一下組件，方便按組件去開發。主要是操作canvas的對象，把canvas傳到每個元件，元件自行操作（原理就是操作同一個應用位址的對象），或是emit去回呼父元件的方法。官方Le5le的範例使用Nuxt寫的，用Vuex去通知父元件呼叫哪些方法，因為我這裡不想引入vuex就去掉了換成現在這種。目前還沒遇到什麼問題，如果有什麼更好的做法歡迎指導。

Usage

專案運行

 npm i
npm run serve

專案建構

 npm run build

Lints and fixes files

 npm run lint

常見問題

為什麼App.vue下padding: 50px

這裡是為了測試一個topology的bug，拖曳左邊元件到畫布時，頁面會回彈到一個位置。 因為我們把他當元件放進專案裡時，不一定是一個單獨的介面，很可能作為dialog或container包裹的元件，所以這個bug還是會有點影響的。正常情況下可以去掉

運行截圖