1、下载jsMind
npm install jsMind --s
2、在需要使用的页面 引入css样式和js方法
import "jsmind/style/jsmind.css";
import jsMind from "jsmind/js-legacy/jsmind.js";
3、初始化jsMind
export default {
data() {
return {
mind: {
/* 元数据,定义思维导图的名称、作者、版本等信息 */
meta: {
name: "思维导图",
author: "",
version: "0.2",
},
/* 数据格式声明 */
format: "node_tree",
/* 数据内容 */
data: {
id: "root",
topic: "jsMind",
children: [
{
id: "easy", // [必选] ID, 所有节点的ID不应有重复,否则ID重复的结节将被忽略
topic: "Easy", // [必选] 节点上显示的内容
direction: "right", // [可选] 节点的方向,此数据仅在第一层节点上有效,目前仅支持 left 和 right 两种,默认为 right
// expanded: false, // [可选] 该节点是否是展开状态,默认为 true
children: [
{
id: "easy8",
topic: "Easy to show",
children: [
{ id: "open7", topic: "on GitHub" },
{ id: "easy7", topic: "Easy to embed" },
],
},
{ 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: false,
children: [
{ id: "open1", topic: "on GitHub" },
{ id: "open2", topic: "BSD License" },
],
},
{
id: "powerful",
topic: "Powerful",
direction: "right",
// expanded: false,
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: "right",
// expanded: false,
children: [
{ id: "other1", topic: "I'm from local variable" },
{ id: "other2", topic: "I can do everything" },
],
},
],
},
},
options: {
container: "jsmind_container", // [必选] 容器的ID
editable: true, // [可选] 是否启用编辑
theme: "primary", // [可选] 主题
view: {
engine: "canvas", // 思维导图各节点之间线条的绘制引擎
hmargin: 20, // 思维导图距容器外框的最小水平距离
vmargin: 20, // 思维导图距容器外框的最小垂直距离
line_width: 2, // 思维导图线条的粗细
line_color: "#ddd", // 思维导图线条的颜色
hide_scrollbars_when_draggable: true,
},
layout: {
hspace: 100, // 节点之间的水平间距
vspace: 20, // 节点之间的垂直间距
pspace: 20, // 节点与连接线之间的水平间距(用于容纳节点收缩/展开控制器)
},
shortcut: {
enable: false, // 是否启用快捷键 默认为true
},
// editableDrag:true,
// get_selected_node:function(val){
// this.selectedNode=val
// }
},
jm: "",
selectedNode: "",
newNodeId: 1,
};
},
mounted() {
// 初始化
this.jm = new jsMind(this.options);
//渲染canvas
this.jm.show(this.mind);
},
};
4、页面绑定dom
<div id="jsmind_container"></div>
5、效果图
6、内置方法
获取节点
获取根节点 : this.jm.get_root()
根据 id 查找节点 : this.jm.get_node(nodeid)
获取选中的节点 : this.jm.get_selected_node()
查找相邻的上一个节点 : this.jm.find_node_before(node|nodeid)
查找相邻的下一个节点 : this.jm.find_node_after(node|nodeid)
操作节点
选中节点 : this.jm.select_node(node)
收起子节点 : this.jm.collapse_node(node|nodeid)
展开子节点 : this.jm.expand_node(node|nodeid)
收起或展开子节点 :this.jm.toggle_node(node|nodeid)
方法可自动展开或收起子节点。
展开全部子节点 : this.jm.expand_all()
展开至指定层级 : this.jm.expand_to_depth(depth)
移动节点 : this.jm.move_node(node|nodeid,beforeid)
启用编辑 : this.jm.enable_edit()
禁止编辑 : this.jm.disable_edit()
调整节点为编辑状态 : this.jm.begin_edit(node|nodeid)
调整节点为只读状态 : this.jm.end_edit(node|nodeid)
加减节点
添加节点 : this.jm.add_node(parent_node, nodeid, topic, data)
在指定位置前插入节点 : this.jm.insert_node_before(node_before, nodeid, topic)
在指定位置后插入节点 : this.jm.insert_node_after(node_after, nodeid, topic)
删除节点及其子节点 : this.jm.remove_node(node|nodeid)
更新节点topic显示内容 : this.jm.update_node(nodeid, topic)
获取数据
获取元数据 :this.jm.get_meta()
。
获取指定格式的思维导图数据 : this.jm.get_data(data_format)
设置样式
设置主题 : this.jm.set_theme(theme)
设置背景色/前景色 : this.jm.set_node_color(nodeid, bgcolor, fgcolor)
设置字体 : this.jm.set_node_font_style(nodeid, size, weight, style)
设置背景图片 : this.jm.set_node_background_image(nodeid, image, width, height)
其他操作
清除节点的选中 : this.jm.select_clear()
。
判断节点是否可见 : this.jm.is_node_visible(node)