vue 实现脑图
Vue 实现脑图
使用 Vue 实现脑图功能可以通过现成的库或手动实现。以下是两种常见方法：
使用现成库（如 jsMind）
安装 jsMind 库：
npm install jsmind在 Vue 组件中引入并初始化：
<template>
<div id="jsmind_container"></div>
</template>
<script>
import jsMind from 'jsmind'
import 'jsmind/style/jsmind.css'
export default {
mounted() {
const options = {
container: 'jsmind_container',
theme: 'primary',
editable: true
}
const mindData = {
meta: { name: '示例脑图', author: '', version: '1.0' },
format: 'node_array',
data: [
{ id: 'root', topic: '中心主题', isroot: true },
{ id: 'child1', parentid: 'root', topic: '子节点1' },
{ id: 'child2', parentid: 'root', topic: '子节点2' }
]
}
this.jm = new jsMind(options)
this.jm.show(mindData)
}
}
</script>手动实现基础脑图
通过递归组件实现树状结构：
<template>
<div class="mindmap">
<mindmap-node :node="rootNode" @add-child="addChild" />
</div>
</template>
<script>
import MindmapNode from './MindmapNode.vue'
export default {
components: { MindmapNode },
data() {
return {
rootNode: {
id: 'root',
text: '中心主题',
children: []
}
}
},
methods: {
addChild(parentId, text) {
// 实现添加子节点逻辑
}
}
}
</script>MindmapNode.vue 组件：
<template>
<div class="node">
<div class="node-content">{{ node.text }}</div>
<button @click="$emit('add-child', node.id)">添加子节点</button>
<div class="children" v-if="node.children && node.children.length">
<mindmap-node
v-for="child in node.children"
:key="child.id"
:node="child"
@add-child="$emit('add-child', $event)"
/>
</div>
</div>
</template>
<script>
export default {
name: 'MindmapNode',
props: {
node: Object
}
}
</script>样式优化
添加基础 CSS 使脑图可视化：
.mindmap {
text-align: center;
}
.node {
display: inline-block;
margin: 10px;
padding: 5px;
border: 1px solid #ccc;
}
.node-content {
padding: 5px;
background: #f5f5f5;
}
.children {
display: flex;
justify-content: center;
}功能扩展
-
添加右键菜单：
<div @contextmenu.prevent="showContextMenu($event, node.id)" > -
实现拖拽排序： 使用
vuedraggable库管理子节点顺序 -
持久化存储： 结合
localStorage或后端 API 保存脑图数据
性能优化
对于大型脑图：
- 使用虚拟滚动
- 实现懒加载子节点
- 添加折叠/展开功能
专业方案推荐
gojs-vue：专业的可视化图表库d3-vue：基于 D3.js 的高度自定义方案echarts-for-vue：使用 ECharts 实现脑图
以上方案可根据项目复杂度选择，简单需求使用 jsMind 即可快速实现，复杂交互建议采用专业可视化库。
