vue中使用百度脑图kityminder-core二次开发的实现

最近项目中要用到 脑图工具。

翻遍个大网站，找到 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 就是正常的。快上岸吧，兄弟们!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。