当前位置：首页 > VUE

vue实现组件连线

2026-03-08 15:51:01VUE

Vue 实现组件连线的方法

在 Vue 中实现组件连线通常用于可视化编辑、流程图绘制等场景。以下是几种常见实现方式：

使用 SVG 或 Canvas 绘制连线

通过 SVG 的 <path> 或 Canvas API 在组件之间绘制连接线：

<template>
  <div>
    <div ref="node1" class="node">Node 1</div>
    <div ref="node2" class="node">Node 2</div>
    <svg class="connector">
      <path :d="pathData" stroke="black" fill="none"/>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pathData: ''
    }
  },
  mounted() {
    this.updatePath()
  },
  methods: {
    updatePath() {
      const node1 = this.$refs.node1.getBoundingClientRect()
      const node2 = this.$refs.node2.getBoundingClientRect()

      const startX = node1.left + node1.width
      const startY = node1.top + node1.height/2
      const endX = node2.left
      const endY = node2.top + node2.height/2

      this.pathData = `M${startX},${startY} C${startX + 100},${startY} ${endX - 100},${endY} ${endX},${endY}`
    }
  }
}
</script>

<style>
.node {
  position: absolute;
  width: 100px;
  height: 50px;
  border: 1px solid #ccc;
}
.connector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
</style>

使用第三方库

更复杂的场景可以考虑使用专门的可视化库：

jsPlumb：专门用于创建连接线的库
```
import { jsPlumb } from 'jsplumb'
```

mounted() { jsPlumb.ready(() => { jsPlumb.connect({ source: 'node1', target: 'node2', anchors: ['Right', 'Left'], connector: ['Bezier', { curviness: 50 }] }) }) }


2. Vue Flow：基于 Vue 的流程图库
```javascript
import { VueFlow } from '@vue-flow/core'

const elements = ref([
  { id: '1', type: 'input', position: { x: 0, y: 0 }, label: 'Node 1' },
  { id: '2', position: { x: 200, y: 100 }, label: 'Node 2' },
  { id: 'e1-2', source: '1', target: '2' }
])

动态响应式连线

当组件位置变化时需要更新连线：

methods: {
  handleResize() {
    window.addEventListener('resize', this.updatePath)
    this.$watch(() => [this.$refs.node1, this.$refs.node2], this.updatePath, { deep: true })
  }
}

连线交互实现

添加可拖拽和点击事件：

data() {
  return {
    isDragging: false,
    startPos: { x: 0, y: 0 }
  }
},
methods: {
  startDrag(e) {
    this.isDragging = true
    this.startPos = { x: e.clientX, y: e.clientY }
  },
  handleDrag(e) {
    if (this.isDragging) {
      const dx = e.clientX - this.startPos.x
      const dy = e.clientY - this.startPos.y
      // 更新组件位置
      this.updatePath()
    }
  }
}