vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)

更新時間：2019年09月26日 08:21:22 作者：源泉

這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

最近項目中要用到腦圖工具。

翻遍個大網(wǎng)站，找到 kityminder-core。

然后發(fā)現(xiàn)這貨

年代久遠，用的技術比較古董
雖然出自大廠，但是文檔資料著實讓人蛋疼

經(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

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