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


Posted in Javascript onSeptember 26, 2019

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
React组件生命周期详解
Jul 03 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
JavaScript中reduce()的用法
May 11 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 #Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 #Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 #Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 #Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 #Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 #Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 #Javascript
You might like
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python中os包的用法
2020/06/01 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
python FTP编程基础入门
2021/02/27 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
物业管理求职自荐信
2013/09/25 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
JS ES6异步解决方案
2021/04/29 Javascript