您好,登錄后才能下訂單哦!
最近項目中要用到 腦圖工具。
翻遍個大網站,找到 kityminder-core。
然后發現這貨
經過數小時的采坑,已經上岸,記錄使用方法如下:
先安裝模塊:
npm install kity kityminder-core -S
然后引用模塊
import kity from 'kity' import kityminder from 'kityminder-core'
然后創建一個容器標簽
<div id="minder-container"></div>
然后創建腦圖示例代碼如下:
this.km = new window.kityminder.Minder({ renderTo: '#minder-container' }); this.km.importJson({ "root": { "data": { "text": "test111" }, "children": [ { "data": { "text": "新聞\nsrc/module/node.j"}}, { "data": { "text": "網頁"} }, { "data": { "text": "貼吧"} }, { "data": { "text": "知道"} }, { "data": { "text": "音樂" } }, { "data": { "text": "圖片"} }, { "data": { "text": "視頻"} }, { "data": { "text": "地圖" } }, { "data": { "text": "百科","expandState":"collapse"}} ] }, "template":"default" });
使用 new 創建一個實例,掛載在this對象上即可。這里要注意的是,初始化的時候,直接使用 kityminder.Minder 可能會報錯。所以需要手動加上 window.kityminder.Minder
這個問題有點奇葩啊,你說直接使用 kityminder 是個空對象,使用 window.kityminder 就是正常的。快上岸吧,兄弟們!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。