vue实现jsmind
使用 Vue 实现 JsMind
JsMind 是一个基于 JavaScript 的思维导图库，可以通过 Vue 集成实现动态思维导图功能。以下是实现步骤和代码示例。
安装 JsMind
通过 npm 安装 JsMind 库：
npm install jsmind或者通过 CDN 引入：
<script src="https://unpkg.com/jsmind@0.4.6/js/jsmind.js"></script>
<link href="https://unpkg.com/jsmind@0.4.6/style/jsmind.css" rel="stylesheet">创建 Vue 组件
创建一个 Vue 组件来承载 JsMind 的渲染和交互逻辑。以下是完整示例代码：
<template>
<div>
<div ref="jsmindContainer" class="jsmind-container"></div>
<button @click="addNode">添加节点</button>
</div>
</template>
<script>
import jsMind from 'jsmind';
export default {
name: 'JsMindDemo',
data() {
return {
jm: null,
mindData: {
meta: {
name: 'jsmind-example',
author: 'author',
version: '0.2',
},
format: 'node_array',
data: [
{ id: 'root', topic: '根节点', isroot: true },
{ id: 'sub1', topic: '子节点1', parentid: 'root' },
{ id: 'sub2', topic: '子节点2', parentid: 'root' },
],
},
};
},
mounted() {
this.initJsMind();
},
methods: {
initJsMind() {
const options = {
container: this.$refs.jsmindContainer,
theme: 'primary',
editable: true,
};
this.jm = new jsMind(options);
this.jm.show(this.mindData);
},
addNode() {
const selectedNode = this.jm.get_selected_node();
if (selectedNode) {
const nodeId = 'node_' + Date.now();
this.jm.add_node(selectedNode.id, nodeId, '新节点');
}
},
},
};
</script>
<style>
.jsmind-container {
width: 100%;
height: 500px;
border: 1px solid #eee;
}
</style>关键功能实现
初始化思维导图
在 mounted 钩子中调用 initJsMind 方法，传入容器 DOM 和配置选项。show 方法加载初始数据。
动态添加节点
通过 addNode 方法获取当前选中节点并添加子节点。jm.add_node 方法接收父节点 ID、新节点 ID 和显示文本。
数据交互
JsMind 提供 get_data 方法获取当前导图数据，可用于保存或提交到后端：
const mindData = this.jm.get_data();
console.log(mindData);自定义样式和主题
通过修改 options.theme 切换内置主题（如 primary、info），或自定义 CSS：
.jsmind-container jsmind {
background-color: #f5f5f5;
}事件处理
JsMind 支持多种事件监听，例如节点选中事件：
this.jm.add_event_listener((event, data) => {
if (event === 'select_node') {
console.log('选中节点:', data.node.topic);
}
});注意事项
- 容器需设置明确宽高，否则可能导致渲染异常
- 动态修改数据后需调用
jm.show()重新渲染 - 复杂操作建议结合 Vuex 管理状态
通过以上方法，可以在 Vue 项目中快速集成 JsMind 实现交互式思维导图功能。
