用 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=