平武建站

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

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

在宁乡等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、成都网站制作 网站设计制作按需定制设计,公司网站建设,企业网站建设,品牌网站制作,全网营销推广,外贸网站制作,宁乡网站建设费用合理。

翻遍个大网站，找到 kityminder-core。

然后发现这货

  • 年代久远，用的技术比较古董
  • 虽然出自大厂，但是文档资料着实让人蛋疼

经过数小时的采坑，已经上岸，记录使用方法如下：

先安装模块：

npm install kity kityminder-core -S

然后引用模块

import kity from 'kity'
import kityminder from 'kityminder-core'

然后创建一个容器标签

然后创建脑图示例代码如下：

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 就是正常的。快上岸吧，兄弟们!

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


当前标题：vue中使用百度脑图kityminder-core二次开发的实现
本文网址：http://pwwzsj.com/article/iiijdh.html

其他资讯