当前位置：首页 > VUE

vue 实现动态连线

2026-03-10 12:25:57VUE

Vue 实现动态连线的方法

使用 SVG 和动态数据绑定

通过 SVG 的 <line> 或 <path> 元素结合 Vue 的数据绑定实现动态连线。定义起点和终点的坐标数据，通过计算属性或方法动态更新连线路径。

<template>
  <svg width="500" height="500">
    <line 
      :x1="start.x" 
      :y1="start.y" 
      :x2="end.x" 
      :y2="end.y" 
      stroke="black" 
      stroke-width="2"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      start: { x: 50, y: 50 },
      end: { x: 200, y: 200 }
    };
  }
};
</script>

动态响应鼠标事件

监听鼠标移动事件，更新连线终点坐标，实现拖拽连线的效果。

<template>
  <svg 
    width="500" 
    height="500" 
    @mousemove="updateEndPoint"
  >
    <line 
      :x1="start.x" 
      :y1="start.y" 
      :x2="end.x" 
      :y2="end.y" 
      stroke="black" 
      stroke-width="2"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      start: { x: 50, y: 50 },
      end: { x: 200, y: 200 }
    };
  },
  methods: {
    updateEndPoint(event) {
      this.end = {
        x: event.clientX,
        y: event.clientY
      };
    }
  }
};
</script>

使用第三方库（如 jsPlumb）

集成 jsPlumb 库实现更复杂的连线逻辑，支持拖拽、连接点吸附等功能。

<template>
  <div id="diagram-container">
    <div 
      v-for="node in nodes" 
      :id="node.id" 
      class="node"
    >
      {{ node.name }}
    </div>
  </div>
</template>

<script>
import { jsPlumb } from 'jsplumb';

export default {
  data() {
    return {
      nodes: [
        { id: 'node1', name: 'Node 1' },
        { id: 'node2', name: 'Node 2' }
      ]
    };
  },
  mounted() {
    jsPlumb.ready(() => {
      jsPlumb.connect({
        source: 'node1',
        target: 'node2',
        anchors: ['Right', 'Left'],
        connector: ['Straight']
      });
    });
  }
};
</script>

<style>
.node {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  position: absolute;
}
#node1 { left: 50px; top: 50px; }
#node2 { left: 250px; top: 150px; }
</style>

动态计算贝塞尔曲线路径

对于需要曲线连线的场景，使用 <path> 和贝塞尔曲线公式动态生成路径数据。

vue 实现动态连线

<template>
  <svg width="500" height="500">
    <path 
      :d="`M${start.x},${start.y} C${control1.x},${control1.y} ${control2.x},${control2.y} ${end.x},${end.y}`" 
      stroke="black" 
      fill="none"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      start: { x: 50, y: 50 },
      end: { x: 300, y: 200 },
      control1: { x: 150, y: 0 },
      control2: { x: 200, y: 250 }
    };
  }
};
</script>