用 Vue 3 实现一个思维导图组件：支持拖拽、编辑和节点关系

一、前言

思维导图是一种用于表示信息、想法和概念的图形化工具。通过将内容分层次的组织和连接，帮助用户更好地理解和记忆。今天，我们将基于 Vue 3 和 VueDraggable，一起实现一个简单的思维导图组件，支持节点拖拽、编辑及节点之间的关系连接。

二、技术选型

• Vue 3：现代的前端框架，适合构建响应式和交互丰富的组件。
• VueDraggable：一个 Vue 的拖拽插件，能够轻松实现元素拖拽功能。
• Canvas 或 SVG：用来绘制节点间的连接线条。

三、思维导图组件设计

3.1 功能需求

我们要实现的思维导图组件需要具备以下功能：

• 节点拖拽：用户能够自由地拖动每个节点。
• 节点编辑：用户可以修改节点的名称。
• 节点关系：用户可以通过连线将节点与节点之间的关系展示出来。
• 自适应布局：当节点被拖动时，自动调整连接线的位置。

3.2 组件结构

思维导图组件可以分为以下几部分：

• 节点组件：展示每个节点的内容（文本、标题等）。
• 连接线组件：通过直线或曲线连接节点之间的关系。
• 画布组件：包含所有节点和连接线的容器。

四、实现步骤

4.1 设置 Vue 3 项目

首先，创建一个新的 Vue 3 项目：

vue create mind-map

安装所需的依赖包：

npm install vue-draggable

4.2 创建思维导图组件

4.2.1 画布组件

我们首先创建一个画布组件，容纳所有的节点和连接线。

<template>
  <div class="canvas" ref="canvasRef">
    <MindNode v-for="node in nodes" :key="node.id" :node="node" @update-node="updateNode"/>
    <svg class="connections">
      <line v-for="(line, index) in connections" :key="index" :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2" stroke="black"/>
    </svg>
  </div>
</template>

<script>
import MindNode from './MindNode.vue';

export default {
  components: {
    MindNode,
  },
  data() {
    return {
      nodes: [
        { id: 1, x: 100, y: 100, title: 'Node 1' },
        { id: 2, x: 300, y: 200, title: 'Node 2' },
      ],
      connections: [
        { x1: 100, y1: 100, x2: 300, y2: 200 },
      ]
    };
  },
  methods: {
    updateNode(id, newTitle) {
      const node = this.nodes.find(n => n.id === id);
      if (node) node.title = newTitle;
    }
  }
};
</script>

<style scoped>
.canvas {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f9f9f9;
}
.connections line {
  stroke-width: 2;
}
</style>

4.2.2 节点组件

每个节点可以单独作为一个组件，用 VueDraggable 实现拖拽效果，并允许用户编辑节点标题。

<template>
  <div class="node" v-bind:style="{ left: node.x + 'px', top: node.y + 'px' }" v-draggable @drag="onDrag">
    <input type="text" v-model="node.title" @input="updateNodeTitle" />
  </div>
</template>

<script>
export default {
  props: ['node'],
  methods: {
    onDrag(event) {
      this.node.x += event.movementX;
      this.node.y += event.movementY;
      this.$emit('update-node', this.node.id, this.node.title);
    },
    updateNodeTitle() {
      this.$emit('update-node', this.node.id, this.node.title);
    }
  }
};
</script>

<style scoped>
.node {
  position: absolute;
  background-color: #fff;
  border: 2px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  min-width: 150px;
}
.node input {
  border: none;
  background: transparent;
  font-size: 16px;
  text-align: center;
}
</style>

4.3 连接线的自动调整

我们使用 SVG 元素绘制连接线，当节点位置发生变化时，重新计算连接线的坐标，确保连接始终保持正确。

4.4 完整实现

此时，我们的思维导图组件已经具备了基本的功能：节点拖拽、编辑和节点关系的连接。你可以根据需求继续添加更多的功能，例如：

• 节点的删除功能
• 可调整的节点大小
• 支持多个级别的树形结构

五、总结

通过使用 Vue 3 和 VueDraggable，我们成功实现了一个简易的思维导图组件，支持拖拽、节点编辑和自动调整连接线。这个组件可以作为基础，扩展出更多的功能，适用于在线协作、课程规划等场景。

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕