一、前言

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

二、技术选型

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

三、思维导图组件设计


3.1 功能需求

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

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

3.2 组件结构

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

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

四、实现步骤


4.1 设置 Vue 3 项目

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

1. vue create mind-map

复制代码

安装所需的依赖包：

1. npm install vue-draggable

复制代码

4.2 创建思维导图组件

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

1. <template>
   
2.   <div class="canvas" ref="canvasRef">
   
3.     <MindNode v-for="node in nodes" :key="node.id" :node="node" @update-node="updateNode"/>
   
4.     <svg class="connections">
   
5.       <line v-for="(line, index) in connections" :key="index" :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2" stroke="black"/>
   
6.     </svg>
   
7.   </div>
   
8. </template>
   
9. 
   
10. ​​​​​​​<script>
    
11. import MindNode from './MindNode.vue';
    
12. 
    
13. export default {
    
14.   components: {
    
15.     MindNode,
    
16.   },
    
17.   data() {
    
18.     return {
    
19.       nodes: [
    
20.         { id: 1, x: 100, y: 100, title: 'Node 1' },
    
21.         { id: 2, x: 300, y: 200, title: 'Node 2' },
    
22.       ],
    
23.       connections: [
    
24.         { x1: 100, y1: 100, x2: 300, y2: 200 },
    
25.       ]
    
26.     };
    
27.   },
    
28.   methods: {
    
29.     updateNode(id, newTitle) {
    
30.       const node = this.nodes.find(n => n.id === id);
    
31.       if (node) node.title = newTitle;
    
32.     }
    
33.   }
    
34. };
    
35. </script>
    
36. 
    
37. <style scoped>
    
38. .canvas {
    
39.   position: relative;
    
40.   width: 100%;
    
41.   height: 100vh;
    
42.   background-color: #f9f9f9;
    
43. }
    
44. .connections line {
    
45.   stroke-width: 2;
    
46. }
    
47. </style>

复制代码

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

1. <template>
   
2.   <div class="node" v-bind:style="{ left: node.x + 'px', top: node.y + 'px' }" v-draggable @drag="onDrag">
   
3.     <input type="text" v-model="node.title" @input="updateNodeTitle" />
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.   props: ['node'],
   
10.   methods: {
    
11.     onDrag(event) {
    
12.       this.node.x += event.movementX;
    
13.       this.node.y += event.movementY;
    
14.       this.$emit('update-node', this.node.id, this.node.title);
    
15.     },
    
16.     updateNodeTitle() {
    
17.       this.$emit('update-node', this.node.id, this.node.title);
    
18.     }
    
19.   }
    
20. };
    
21. </script>
    
22. 
    
23. ​​​​​​​<style scoped>
    
24. .node {
    
25.   position: absolute;
    
26.   background-color: #fff;
    
27.   border: 2px solid #ddd;
    
28.   padding: 10px;
    
29.   border-radius: 5px;
    
30.   cursor: pointer;
    
31.   min-width: 150px;
    
32. }
    
33. .node input {
    
34.   border: none;
    
35.   background: transparent;
    
36.   font-size: 16px;
    
37.   text-align: center;
    
38. }
    
39. </style>

复制代码

4.3 连接线的自动调整

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

4.4 完整实现

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

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

五、总结

通过使用 Vue 3 和 VueDraggable，我们成功实现了一个简易的思维导图组件，支持拖拽、节点编辑和自动调整连接线。这个组件可以作为基础，扩展出更多的功能，适用于在线协作、课程规划等场景。
到此这篇关于使用Vue3实现一个简单的思维导图组件的文章就介绍到这了,更多相关Vue3思维导图组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339367eyt.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！