vue中使用百度脑图kityminder-core二次开发的实现
更新时间：2019年09月26日 08:21:22 作者：源泉
这篇文章主要介绍了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 就是正常的。快上岸吧，兄弟们!
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
关于webpack-dev-server配置代理解决前端开发中的跨域问题
这篇文章主要介绍了关于webpack-dev-server配置代理解决前端开发中的跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue2.0 better-scroll 实现移动端滑动的示例代码
本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2018-01-01
Iconfont国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,下面这篇文章主要给大家介绍了关于Vue3项目引入阿里iconfont图标与字体及使用教程,需要的朋友可以参考下2023-05-05
这篇文章给大家介绍了vue3如何实现页面跳转,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
随着前端大屏页面的逐渐壮大,客户的...其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8,下面这篇文章主要给大家介绍了关于vue播放flv、m3u8视频流(监控)的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue使用file-saver插件保存各种格式文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数，所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化2021-10-10
这篇文章主要介绍了解决element-ui的下拉框有值却无法选中的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了vue 封装 Adminlte3组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论