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 相关文章推荐
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
浅谈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
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
基于jQuery的倒计时实现代码
2012/05/30 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
Python实时获取cmd的输出
2015/12/13 Python
深入理解python中的select模块
2017/04/23 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python tkinter canvas使用实例
2019/11/04 Python
python 元组的使用方法
2020/06/09 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
内衣营销方案
2014/03/15 职场文书
个人剖析材料范文
2014/09/30 职场文书
2014年图书室工作总结
2014/12/09 职场文书
五年级下册复习计划
2015/01/19 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python