vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)
更新時(shí)間：2019年09月26日 08:21:22 作者：源泉
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
最近項(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)頁(yè)"} },
{ "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)文章
這篇文章主要介紹了vue 父組件中調(diào)用子組件函數(shù)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。 通過對(duì)客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織， Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染,需要的朋友可以參考下2019-05-05
Vue項(xiàng)目實(shí)現(xiàn)html5圖片上傳的示例代碼
本文主要介紹了Vue項(xiàng)目?html5圖片上傳，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue項(xiàng)目中vue-i18n和element-ui國(guó)際化開發(fā)實(shí)現(xiàn)過程
這篇文章主要介紹了vue項(xiàng)目中vue-i18n和element-ui國(guó)際化開發(fā)實(shí)現(xiàn)過程，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue+freemarker中遇到的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue樣式穿透 ::v-deep的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue項(xiàng)目使用$router.go(-1)返回時(shí)刷新原來的界面操作
這篇文章主要介紹了vue項(xiàng)目使用$router.go(-1)返回時(shí)刷新原來的界面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Tag組件其實(shí)是一個(gè)很小的組件，業(yè)務(wù)價(jià)值很低，主要用于Vue新手入門。主要實(shí)現(xiàn)Vue常用的父組件改變子組件的值，view改變model，model的變化反應(yīng)到view上，事件的綁定等功能。下面跟著小編一起來看下吧2017-01-01
淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive (下)
這篇文章主要介紹了淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
循環(huán)使用v-for指令,v-for指令需要以site in sites形式的特殊語(yǔ)法,sites是源數(shù)據(jù)數(shù)組并且site是數(shù)組元素迭代的別名,下面這篇文章主要給大家介紹了關(guān)于Vue中v-for列表循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-11-11