vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)
更新時間：2019年09月26日 08:21:22 作者：源泉
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
最近項目中要用到 腦圖工具。
翻遍個大網(wǎng)站，找到 kityminder-core。
然后發(fā)現(xiàn)這貨
- 年代久遠，用的技術(shù)比較古董
- 雖然出自大廠，但是文檔資料著實讓人蛋疼
經(jīng)過數(shù)小時的采坑，已經(jīng)上岸，記錄使用方法如下：
先安裝模塊：
npm install kity kityminder-core -S
然后引用模塊
import kity from 'kity' import kityminder from 'kityminder-core'
然后創(chuàng)建一個容器標簽
<div id="minder-container"></div>
然后創(chuàng)建腦圖示例代碼如下：
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": "網(wǎng)頁"} },
{ "data": { "text": "貼吧"} },
{ "data": { "text": "知道"} },
{ "data": { "text": "音樂" } },
{ "data": { "text": "圖片"} },
{ "data": { "text": "視頻"} },
{ "data": { "text": "地圖" } },
{ "data": { "text": "百科","expandState":"collapse"}}
]
},
"template":"default"
});
使用 new 創(chuàng)建一個實例，掛載在this對象上即可。這里要注意的是，初始化的時候，直接使用 kityminder.Minder 可能會報錯。所以需要手動加上 window.kityminder.Minder
這個問題有點奇葩啊，你說直接使用 kityminder 是個空對象，使用 window.kityminder 就是正常的?？焐习栋?，兄弟們!
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于webpack-dev-server配置代理解決前端開發(fā)中的跨域問題
這篇文章主要介紹了關(guān)于webpack-dev-server配置代理解決前端開發(fā)中的跨域問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼
本篇文章主要介紹了vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2018-01-01
Iconfont國內(nèi)功能很強大且圖標內(nèi)容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉(zhuǎn)換等功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項目引入阿里iconfont圖標與字體及使用教程,需要的朋友可以參考下2023-05-05
這篇文章給大家介紹了vue3如何實現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
vue播放flv、m3u8視頻流(監(jiān)控)的方法實例
隨著前端大屏頁面的逐漸壯大,客戶的...其中實時播放監(jiān)控的需求逐步增加,視頻流格式也是有很多種,用到最多的.flv、.m3u8,下面這篇文章主要給大家介紹了關(guān)于vue播放flv、m3u8視頻流(監(jiān)控)的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue使用file-saver插件保存各種格式文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個輔助函數(shù)，所謂的輔助函數(shù)分別對State、Getters、Mutations、Actions在完成狀態(tài)的使用進行簡化2021-10-10
這篇文章主要介紹了解決element-ui的下拉框有值卻無法選中的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue項目中如何封裝axios（統(tǒng)一管理http請求）
這篇文章主要給大家介紹了關(guān)于Vue項目中如何封裝axios（統(tǒng)一管理http請求）的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03