当前位置：首页 > VUE

vue 脑图实现

2026-02-17 12:04:56VUE

Vue 脑图实现方案

使用现成库实现

推荐使用 jsMind 或 mind-elixir 这类开源库，它们提供了完整的脑图功能，支持 Vue 集成。

安装 mind-elixir：

npm install mind-elixir

在 Vue 组件中使用：

<template>
  <div id="mindmap-container"></div>
</template>

<script>
import MindElixir from 'mind-elixir'
export default {
  mounted() {
    const mind = new MindElixir({
      el: '#mindmap-container',
      direction: MindElixir.LEFT,
      data: {
        nodeData: {
          id: 'root',
          topic: '中心主题',
          children: [
            { topic: '分支1' },
            { topic: '分支2' }
          ]
        }
      }
    })
    mind.init()
  }
}
</script>

自定义实现方案

如果需要完全自定义，可以通过 SVG 或 Canvas 实现基础脑图结构。

vue 脑图实现

定义数据结构：

data() {
  return {
    nodes: [
      { id: 1, text: '中心节点', x: 300, y: 200 },
      { id: 2, text: '子节点1', x: 200, y: 300, parentId: 1 }
    ]
  }
}

渲染节点和连线：

vue 脑图实现

<template>
  <svg width="600" height="400">
    <path v-for="link in links" :d="calcLinkPath(link)" stroke="#999" fill="none"/>
    <circle v-for="node in nodes" :cx="node.x" :cy="node.y" r="30" fill="#fff" stroke="#333"/>
  </svg>
</template>

交互功能实现

添加节点拖拽功能：

methods: {
  startDrag(node) {
    this.draggingNode = node
    document.addEventListener('mousemove', this.handleDrag)
    document.addEventListener('mouseup', this.stopDrag)
  },
  handleDrag(e) {
    this.draggingNode.x = e.clientX
    this.draggingNode.y = e.clientY
  }
}

样式优化

为不同层级节点添加样式区分：

.node.level-0 { fill: #ff7675; }
.node.level-1 { fill: #74b9ff; }
.link { stroke-width: 2px; }

扩展功能

实现右键菜单添加节点：

contextMenu(e, parentNode) {
  e.preventDefault()
  const newNode = {
    id: Date.now(),
    text: '新节点',
    x: e.clientX,
    y: e.clientY,
    parentId: parentNode.id
  }
  this.nodes.push(newNode)
}