画布

一个基于 Vue Flow 的画布组件，用于构建交互式基于节点的界面。

Canvas 组件提供了一个基于 Vue Flow 的画布，用于构建交互式基于节点的界面。 它预配置了适合 AI 应用程序的合理默认值，包括平移、缩放和选择行为。

使用 CLI 安装

AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add canvas

手动安装

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

Canvas.vue
index.ts
<script setup lang="ts">
import type { FlowEmits, FlowProps, FlowSlots } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { VueFlow } from '@vue-flow/core'
import { useForwardPropsEmits } from 'reka-ui'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

const props = withDefaults(defineProps<FlowProps>(), {
  deleteKeyCode: () => ['Backspace', 'Delete'],
  fitViewOnInit: true,
  panOnDrag: false,
  panOnScroll: true,
  selectNodesOnDrag: true,
  zoomOnDoubleClick: false,
})

const emits = defineEmits<FlowEmits>()
const slots = defineSlots<FlowSlots>()
const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <VueFlow data-slot="canvas" v-bind="forwarded">
    <Background />

    <template v-if="slots['connection-line']" #connection-line="connectionLineProps">
      <slot name="connection-line" v-bind="connectionLineProps" />
    </template>

    <template v-if="slots['zoom-pane']" #zoom-pane>
      <slot name="zoom-pane" />
    </template>

    <slot />
  </VueFlow>
</template>

特性

  • 预配置的 Vue Flow 画布，具有 AI 优化的默认值
  • 启用滚动平移，实现直观导航
  • 拖拽选择，支持多节点操作
  • 使用 CSS 变量可自定义背景颜色
  • 删除键支持（Backspace 和 Delete 键）
  • 自动适应视图以显示所有节点
  • 禁用双击缩放以获得更好的用户体验
  • 禁用拖拽平移以防止意外画布移动
  • 完全兼容 Vue Flow props 和 API

Props

<Canvas />

<slot />FlowSlots
子组件，如 Background、Controls 或 MiniMap。
propsFlowProps
任何其他 Vue Flow props，如 nodes、edges、nodeTypes、edgeTypes、onNodesChange 等。
Edit this page
工具
连接