使用Vue2和jsmind.js实现思维导图，包括放大、缩小、添加、修改和删除等基本功能，以及使用jsmind.menu实现右键点击显示菜单。

1 参考文档

注意：vue-jsmind是在jsmind.js基础上进行了封装，本文用的是jsmind不是vue-jsmind；jsmind.menu.js不是jsmind.js自带的，是其他大神开发的。

1.1 参考网址

实现基本功能使用jsmind.js即可，不需要jsmind.menu.js

开源项目地址： http://hizzgdev.github.io/jsmind/developer.html

gitee上的地址：https://gitee.com/mirrors/jsmind

github上的地址：https://github.com/hizzgdev/jsmind

实现右键菜单的js文件，实现此功能需要将jsmind.menu.js文件下载下来，再动态导入到工程中。

https://github.com/allensunjian/jsmind.menu.js

1.2 安装jsmind

我使用的版本是："jsmind": "^0.4.6"；

cnpm install jsmind --save

2 截图

3 源代码

<template><div><div><input type="button" value="放大" v-on:click="zoomIn" /><input type="button" value="缩小" v-on:click="zoomOut" /></div><div id="jsmind_container"></div></div>
</template><script>
import "jsmind/style/jsmind.css";
import jsMind from "jsmind/js/jsmind.js";
window.jsMind = jsMind;require("jsmind/js/jsmind.draggable.js");
require("jsmind/js/jsmind.screenshot.js");
require("@/assets/js/jsmind.menu.js");export default {name: "MyJsmind",data: function () {return {jm: null,};},mounted: function () {this.init_data();},methods: {init_data: function () {var mind = {/* 元数据，定义思维导图的名称、作者、版本等信息 */meta: {name: "jsMind-demo-tree",author: "hizzgdev@163.com",version: "0.2",},/* 数据格式声明 */format: "node_tree",/* 数据内容 */data: {id: "root",topic: "jsMind",children: [{id: "easy",topic: "Easy",direction: "left",expanded: false,children: [{ id: "easy1", topic: "Easy to show" },{ id: "easy2", topic: "Easy to edit" },{ id: "easy3", topic: "Easy to store" },{ id: "easy4", topic: "Easy to embed" },],},{id: "open",topic: "Open Source",direction: "right",expanded: true,children: [{ id: "open1", topic: "on GitHub" },{ id: "open2", topic: "BSD License" },],},{id: "powerful",topic: "Powerful",direction: "right",children: [{ id: "powerful1", topic: "Base on Javascript" },{ id: "powerful2", topic: "Base on HTML5" },{ id: "powerful3", topic: "Depends on you" },],},{id: "other",topic: "test node",direction: "left",children: [{ id: "other1", topic: "I'm from local variable" },{ id: "other2", topic: "I can do everything" },],},],},};var options = {container: "jsmind_container",editable: true,theme: "primary",menuOpts: {showMenu: true,injectionList: [{target: "edit",text: "编辑节点",callback: function (node) {console.log(node);},},{target: "addChild",text: "添加子节点",callback: function (node) {console.log(node);},},{target: "addBrother",text: "添加兄弟节点",callback: function (node) {console.log(node);},},{target: "delete",text: "删除节点",callback: function (node) {console.log(node);},},{target: "screenshot",text: "下载导图",callback: function (node) {console.log(node);},},{target: "showAll",text: "展开全部节点",callback: function (node) {console.log(node);},},{target: "hideAll",text: "收起全部节点",callback: function (node) {console.log(node);},},],},};this.jm = new jsMind(options);this.jm.show(mind);},zoomIn: function () {this.jm.view.zoomIn();},zoomOut: function () {this.jm.view.zoomOut();},},
};
</script><style scoped>
#jsmind_container {width: 100%;height: 800px;
}
</style>

基于Vue2和jsmind.js实现思维导图相关推荐

使用js实现思维导图
本文主要阐述使用js实现思维导图的关键技术点,如果还不知道什么是思维导图的同学,请自行度娘.以下是demo和源码的传送门: demo:http://sources.ikeepstudying.com/ ...
javascript高级程序设计---js事件思维导图
绘制思维软件与平时用的笔记,以及导出功能,这三个问题综合起来,于是我把思维导图分开画 1.js事件的基本概念 2.js事件的事件处理程序 3.js事件的事件对象转载于:https://www.cnb ...
d3.js mysql_D3.js画思维导图（转）
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...
xMind思维导图软件
xmind源码下载: http://code.google.com/p/xmind3 xMind官方网站: http://www.xmind.net 思维导图软件 XMind 与 FreeMind 的 ...
Vue 思维导图(二)
Vue思维导图笔记 vue2.0的思维导图整理 Vue.js学习思维导图一览本图覆盖Vue.js学习所有基本知识点,有需要的同学可以保存到本地进行缩放,如有问题欢迎批评指正
ibmm，让思维导图回归本质
赖勇浩(http://laiyonghao.com) 缘起你想用思维导图来分析问题,然后,你就有两个问题了.--无名氏许多朋友都听说过思维导图(又称脑图),它是用来理清思路的好办法.同时我也相信许 ...
python程序设计思维导图_程序设计思维导图
###sample: https://www.bbsmax.com/A/A7zgx2ZoJ4/ 使用python+django+twistd 开发自己的操作和维护系统的一个 yxwkaifa 2015 ...
计算机思维在音乐中的应用,“思维导图”在音乐理论教育中的应用.doc
精品文档,助力人生,欢迎关注小编! "思维导图"在音乐理论教育中的应用摘要:随着教育改革的不断推进,素质教育被相关的教育人员重视起来.而"思维导图"的教学模式 ...
几款思维导图软件的调研与选择（附下载地址）
市面上的思维导图软件产品真的是不胜枚举.就我个人而言,我用过FreeMind.FreePlane.TheBrain,后来在网上查了查还有XMind.MindManager.MindV等. 就我个人使用 ...
类似echarts图的思维导图效果,用js实现xmind思维导图的效果===使用jsMind来实现
首先:我先先来看看实现的效果: 然后我再说说具体实现的步骤吧:(别急文件后面我会把百度网盘链接发出来的,除了小案例外还有jsMind的文件,案例,目前的说明文档) 第一:引入jsMind的css.js ...

基于Vue2和jsmind.js实现思维导图