使用Vue3实现一个简单的思维导图组件

vue create mind-map

npm install vue-draggable

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

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