当前位置：首页 > VUE

vue 实现导图

2026-01-16 17:27:56VUE

Vue 实现思维导图

使用第三方库

推荐使用 vue3-mindmap 或 jsmind 这类专门为 Vue 设计的思维导图库。这些库提供了开箱即用的组件和丰富的配置选项。

安装 vue3-mindmap：

npm install vue3-mindmap

在 Vue 组件中使用：

<template>
  <Mindmap :data="mindmapData" />
</template>

<script>
import { Mindmap } from 'vue3-mindmap';

export default {
  components: { Mindmap },
  data() {
    return {
      mindmapData: {
        nodeData: {
          text: '根节点',
          children: [
            { text: '子节点1' },
            { text: '子节点2' }
          ]
        }
      }
    };
  }
};
</script>

自定义实现

如果需要完全自定义实现，可以使用 SVG 或 Canvas 来绘制节点和连线。

vue 实现导图

定义数据结构：

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

渲染节点和连线：

<template>
  <svg width="500" height="500">
    <!-- 绘制连线 -->
    <line 
      v-for="node in nodes.filter(n => n.parentId)" 
      :key="`line-${node.id}`"
      :x1="nodes.find(n => n.id === node.parentId).x" 
      :y1="nodes.find(n => n.id === node.parentId).y"
      :x2="node.x" 
      :y2="node.y"
      stroke="#000"
    />

    <!-- 绘制节点 -->
    <circle 
      v-for="node in nodes" 
      :key="`circle-${node.id}`"
      :cx="node.x" 
      :cy="node.y" 
      r="40" 
      fill="#fff" 
      stroke="#000"
    />

    <!-- 节点文字 -->
    <text 
      v-for="node in nodes" 
      :key="`text-${node.id}`"
      :x="node.x" 
      :y="node.y" 
      text-anchor="middle"
    >
      {{ node.text }}
    </text>
  </svg>
</template>

添加交互功能

实现拖拽和动态添加节点的功能：

vue 实现导图

methods: {
  handleDragStart(node, e) {
    this.draggingNode = node;
    e.dataTransfer.setData('text/plain', node.id);
  },
  handleDrop(e) {
    const parentId = parseInt(e.dataTransfer.getData('text/plain'));
    const newNode = {
      id: this.nodes.length + 1,
      text: '新节点',
      x: e.offsetX,
      y: e.offsetY,
      parentId
    };
    this.nodes.push(newNode);
  }
}

使用 D3.js 集成

对于更复杂的可视化需求，可以结合 D3.js：

安装 D3.js：

npm install d3

在 Vue 中使用：

import * as d3 from 'd3';

mounted() {
  this.renderMindmap();
},
methods: {
  renderMindmap() {
    const svg = d3.select(this.$refs.mindmap);
    // 使用 D3.js 的层级布局和力导向布局
    // 具体实现参考 D3.js 文档
  }
}

以上方法提供了从简单到复杂的 Vue 思维导图实现方案，可以根据项目需求选择合适的方案。