连接

一个自定义连接线组件，用于基于 Vue Flow 的画布，具有动画贝塞尔曲线样式。

Connection 组件为 Vue Flow 画布提供了一条样式化的连接线。它在目标端渲染一条带有圆形指示器的动画贝塞尔曲线，通过 CSS 变量使用一致的主题。

Connection 组件设计用于与 Canvas 组件一起使用。查看 Workflow 演示以获取完整示例。

使用 CLI 安装

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add connection

手动安装

将以下代码复制并粘贴到同一文件夹中。

Connection.vue

index.ts

<script setup lang="ts">
import type { ConnectionLineProps } from '@vue-flow/core'
import { computed } from 'vue'

const props = defineProps<ConnectionLineProps>()

const HALF = 0.5

const pathD = computed(() => {
  const { sourceX, sourceY, targetX, targetY } = props
  const controlX1 = sourceX + (targetX - sourceX) * HALF
  const controlX2 = sourceX + (targetX - sourceX) * HALF
  return `M${sourceX},${sourceY} C ${controlX1},${sourceY} ${controlX2},${targetY} ${targetX},${targetY}`
})
</script>

<template>
  <g>
    <path
      class="animated"
      fill="none"
      stroke="var(--color-ring)"
      :stroke-width="1"
      :d="pathD"
    />

    <circle
      :cx="targetX"
      :cy="targetY"
      fill="#fff"
      :r="3"
      stroke="var(--color-ring)"
      :stroke-width="1"
    />
  </g>
</template>