Vue.js开发BotBuilder：动态箭头连接线实现求助

核心实现思路 #

放弃单个div模拟直线的方案，改用定位+CSS变换实现动态线条：

• 用基础div作为线条主体，通过transform: rotate()调整角度、width控制长度
• 用伪元素::after绘制箭头，随线条角度同步旋转
• 监听卡片拖拽事件，实时计算两个连接卡片的坐标，动态更新线条的位置、长度和角度

实现步骤 #

1. 卡片拖拽与线条计算的Vue组件代码

<template>
  <div class="flow-container">
    <!-- 可拖拽卡片 -->
    <div 
      v-for="card in cards" 
      :key="card.id"
      class="flow-card"
      :style="{ top: `${card.top}px`, left: `${card.left}px` }"
      @mousedown="startDrag($event, card)"
    >
      {{ card.name }}
    </div>

    <!-- 动态连接线 -->
    <div 
      v-for="link in links" 
      :key="link.id"
      class="flow-link"
      :style="getLinkStyle(link)"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { id: 1, name: '卡片1', top: 50, left: 50 },
        { id: 2, name: '卡片2', top: 150, left: 300 }
      ],
      links: [
        { id: 1, from: 1, to: 2 }
      ],
      draggingCard: null,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    startDrag(e, card) {
      this.draggingCard = card
      this.startX = e.clientX - card.left
      this.startY = e.clientY - card.top
      
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.endDrag)
    },
    onDrag(e) {
      if (!this.draggingCard) return
      this.draggingCard.left = e.clientX - this.startX
      this.draggingCard.top = e.clientY - this.startY
    },
    endDrag() {
      this.draggingCard = null
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('mouseup', this.endDrag)
    },
    // 计算线条样式
    getLinkStyle(link) {
      const fromCard = this.cards.find(c => c.id === link.from)
      const toCard = this.cards.find(c => c.id === link.to)
      if (!fromCard || !toCard) return {}

      // 卡片固定宽高，可根据实际调整
      const cardWidth = 150, cardHeight = 80
      // 取卡片中心点作为连接点，也可改为边缘锚点（如右侧：fromX = fromCard.left + cardWidth）
      const fromX = fromCard.left + cardWidth / 2
      const fromY = fromCard.top + cardHeight / 2
      const toX = toCard.left + cardWidth / 2
      const toY = toCard.top + cardHeight / 2

      // 计算线条长度和旋转角度
      const dx = toX - fromX
      const dy = toY - fromY
      const length = Math.sqrt(dx * dx + dy * dy)
      const angle = Math.atan2(dy, dx) * 180 / Math.PI

      return {
        left: `${fromX}px`,
        top: `${fromY}px`,
        width: `${length}px`,
        transform: `rotate(${angle}deg)`
      }
    }
  }
}
</script>

2. CSS实现线条与箭头样式

.flow-container {
  position: relative;
  width: 100%;
  height: 600px;
  background: #f5f5f5;
}

.flow-card {
  position: absolute;
  width: 150px;
  height: 80px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.flow-link {
  position: absolute;
  height: 2px;
  background: #2196F3;
  transform-origin: left center; /* 以线条起点为旋转轴心 */
  z-index: 1;
}

.flow-link::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  /* 用border绘制箭头三角形 */
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #2196F3;
}

自定义适配说明 #

• 若需连接卡片特定锚点（如左侧/右侧），修改getLinkStyle中fromX/toX的计算逻辑即可
• 如需虚线样式：将.flow-link的background改为transparent，添加border: 2px dashed #2196F3;
• 如需调整箭头大小，修改伪元素的border尺寸参数

内容的提问来源于stack exchange，提问作者Elton Souza