在Vue2中使用百度脑图kityminder-core

第一步：安装模板

npm install kity kityminder-core -S

第二步：在局部导入

import kity from "kity";
import kityminder from "kityminder-core";

第三步：创建一个容器

<template><div><div style="width: 600px; height: 400px" id="minder-container"></div></div>
</template>

第四步：script

export default {data() {return {};},mounted() {this.naotu();},methods: {naotu() {this.km = new window.kityminder.Minder({renderTo: "#minder-container",});this.km.importJson({root: {data: {text: "test111",},children: [{ data: { text: "新闻" } },{ 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 就是正常的。

转载链接: https://segmentfault.com/a/1190000020496127?utm_source=tag-newest

在Vue2中使用百度脑图kityminder-core相关推荐

Vue2中使用百度脑图kityminder-core二次开发
先安装模板: npm install kity kityminder-core -S 再导入局部(要看你使用的组件,多不多,很多组件使用,就全局)模块: import kity from 'kity' ...
在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令
需求说明:最近在搞kityminder-core的思维导图,需要增加一个给节点添加文件的功能,一直在研究源码,发现都是通过执行命令的方式实现的.一直卡在新增命令的步骤,搞了好多天了今天找到了如何在源码 ...
百度脑图,唯一不黑的百度产品
直达链接: https://naotu.baidu.com/ 百度脑图是一款好用到不像百度产品的产品! 开源地址: https://github.com/fex-team/kityminder.gi ...
百度脑图核心——kityminder-editor 本地化改造
一.思维导图是什么? 早在高中时代就听同学提过思维导图这种东西了,还记得那是一本物理辅导书.当时确实还不理解这种东西,可能是因为当时物理太好,不需要使用思维导图来辅助记忆那些知识点 (⊙o⊙).那时候 ...
在线思维导图神器-百度脑图
平时工作.学习习惯用思维导图来整理所得,一是可以让知识在脑子里形成体系脉络,以后复习的时候直接把思维导图拿出来过一遍,很方便,二是勤动手加强记忆,无论看多少次思维导图,有什么不顺的地方或者发散性思维可 ...
创建便于git管理的思维导图 -- markdown结合百度脑图
创建便于git管理的思维导图的方法概述最近在做一些计划或者总结的时候,喜欢用思维导图的方式去实现,图的方式可以很方便的展示内容,便于查看. 自己比较喜欢做思维导图的软件是百度脑图,主要是用起来比较 ...
百度脑图解析：如何进行web复杂应用的渐进式开发
内容来源:2017 年 4 月 8 日,张博在"HTML5梦工场 & 微软开发者沙龙第05期-持续集成"进行<Web复杂应用的「渐进式」开发>演讲分享.IT ...
思维导图趋势大分析（MindMaster与百度脑图)
思维导图趋势大分析(MindMaster与百度脑图) 思维导图现在可以说是大流行期间,涉及学习.工作.生活方方面面的内容. 一.什么是思维导图思维导图的英文名称是The Mind Map,也叫做心智 ...
如何在线打开Xmind文件 — 百度脑图在线工具
1.问题背景: 某些时候会接收到别人发给我们的xmind(一种思维导图)的文件,但苦于我们的电脑上没有下载Xmind软件,所以我们怎么快捷的查看该文件的内容呢? 2.解决方案: Step 1: ...
百度脑图-便捷的思维工具
前沿:百度脑图作为百度出品的一款思维管理工具,用起来真心不错,特别是线上自动保存等功能也是非常到位的设计. 1.使用:百度脑图暂无客户端,完全依赖在线broswer,所以首先你得需要安装一个支持htm ...

在Vue2中使用百度脑图kityminder-core

在Vue2中使用百度脑图kityminder-core相关推荐

最新文章

热门文章