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