配置

🌐 Configuration

本页介绍 Vue Flow 可用的配置选项以及如何使用和设置它们。

🌐 This page covers the configuration options available for Vue Flow and how to use and set them.

选项/属性

🌐 Options / Props

Vue Flow 允许你配置缩放、图表和流程行为。配置可以作为 VueFlow 组件的 props 传入，也可以作为 useVueFlow 组合函数的选项传入。

🌐 Vue Flow allows you to configure zoom, graph and flow behavior. Configuration can be passed either as props to the VueFlow component or as options to the useVueFlow composable.

• 使用组件属性

<!-- Pass configuration as props -->
<template>
  <VueFlow :default-viewport="{ zoom: 0.5 }" :max-zoom="4" :min-zoom="0.1" />
</template>

更新配置

🌐 Updating Config

你可以随时更新配置，无论是通过将它们绑定为 props，还是使用 useVueFlow 返回的状态值。

🌐 You can update the configuration at any point, either by having them bound as props or using the state values returned by useVueFlow.

• 使用组件属性

<script setup>
const nodesDraggable = ref(false)

const toggleNodesDraggable = () => {
  // toggle the state
  nodesDraggable.value = !nodesDraggable.value
}
</script>
<template>
  <VueFlow :nodes-draggable="nodesDraggable">...</VueFlow>
</template>

• 使用状态（可组合）

<script setup>
const { nodesDraggable } = useVueFlow()

const toggleNodesDraggable = () => {
  nodesDraggable.value = !nodesDraggable.value
}
</script>

基本选项

🌐 Basic Options

id（可选）

🌐 id (optional)

• 类型：string

• 详细信息：

  Vue Flow 的唯一 ID。

  它用于查找和注入状态实例。

nodes（可选）

🌐 nodes (optional)

• 类型: Node[]

• 详细信息：

  节点数组。

  请分别使用 modelValue 属性或 nodes。不要混合使用它们！

• 示例：

<script setup>
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  { 
    id: '1', 
    type: 'input',
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
  },
  { 
    id: '2', 
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
  { 
    id: '3', 
    position: { x: 400, y: 100 },
    data: { label: 'Node 3' },
  },
  { 
    id: '4', 
    type: 'output',
    position: { x: 400, y: 200 },
    data: { label: 'Node 4' },
  },
])
</script>
<template>
  <VueFlow :nodes="nodes" />
</template>

edges（可选）

🌐 edges (optional)

• 类型: Edge[]

• 详细信息：

  边数组。

  请分别使用 modelValue 属性或 edges。不要混用它们！

• 示例：

<script setup>
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  {
    id: '1',
    type: 'input',
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
  {
    id: '3',
    position: { x: 400, y: 100 },
    data: { label: 'Node 3' },
  },
  {
    id: '4',
    type: 'output',
    position: { x: 400, y: 200 },
    data: { label: 'Node 4' },
  },
])

const edges = ref([
  { 
    id: 'e1->3', 
    source: '1',
    target: '3' 
  },
  { 
    id: 'e1->2', 
    source: '1', 
    target: '2',  
  },
])
</script>
<template>
  <VueFlow :nodes="nodes" :edges="edges" />
</template>

modelValue（可选）（已弃用）

🌐 modelValue (optional) (deprecated)

• 类型: Elements

• 详细信息：

  元素数组（节点 + 边缘）。

  可以使用 modelValue 属性，或者单独使用 nodes/edges。不要混用它们！

• 示例：

<script setup>
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'

const elements = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e1-2', source: '1', target: '2', animated: true },
])
</script>

<template>
  <VueFlow v-model="elements" />
</template>

node-types（可选）

🌐 node-types (optional)

• 类型: Record<string, NodeComponent>

• 默认: DefaultNodeTypes

• 详细信息：

  将节点类型名称映射到组件定义/名称的对象。

• 示例：

<script setup>
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'

const nodeTypes = {
  custom: CustomNode,
}

const nodes = ref([
  { 
    id: '1', 
    type: 'custom',
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
  },
  { 
    id: '2', 
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
])

const edges = ref([
  { id: 'e1->2', source: '1', target: '2' },
])
</script>
<template>
  <VueFlow :nodes="nodes" :edges="edges" :node-types="nodeTypes" />
</template>

edge-types（可选）

🌐 edge-types (optional)

• 类型: Record<string, EdgeComponent>

• 默认: DefaultEdgeTypes

• 详细信息：

  将边类型名称映射到组件定义/名称的对象。

• 示例：

<script setup>
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'

const edgeTypes = {
  custom: CustomEdge,
}

const nodes = ref([
  {
    id: '1',
    type: 'custom',
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
])

const edges = ref([
  { 
    id: 'e1->2', 
    type: 'custom',
    source: '1', 
    target: '2' 
  },
])
</script>
<template>
  <VueFlow :nodes="nodes" :edges="edges" :edge-types="edgeTypes" />
</template>

apply-default（可选）

🌐 apply-default (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  启用/禁用默认状态更新处理程序。

  如果你想完全控制状态变化，你可以禁用默认行为，并将自己定义的更改处理器应用到状态上。

  有关更多信息，请查看受控流程指南。

• 示例：

<template>
  <VueFlow :apply-default="false" />
</template>

connection-mode（可选）

🌐 connection-mode (optional)

• 类型: ConnectionMode

• 默认：ConnectionMode.Loose

• 详细信息：

  如果设置为 loose，所有句柄都将被视为源句柄（因此也允许在目标句柄上进行连接）。

connection-line-options

• 类型: ConnectionLineOptions

• 详细信息：

  连接线的选项。

  选项包括连接线类型、样式和可能的标记类型（标记结束/标记开始）。

connection-line-type（可选）（已弃用）

🌐 connection-line-type (optional) (deprecated)

• 类型: ConnectionLineType

• 默认：ConnectionLineType.Bezier

• 详细信息：

  绘制连接线时使用的路径（bezier、step、smoothstep）。

  使用自定义连接线时，此属性不执行任何操作。

connection-line-style（可选）（已弃用）

🌐 connection-line-style (optional) (deprecated)

• 类型：CSSProperties | null

• 详细信息：

  用于添加到默认连接线的附加样式。

fit-view-on-init（可选）

🌐 fit-view-on-init (optional)

• 类型：boolean

• 默认：false

• 详细信息：

  视口安装时触发适配视图。

视口选项

🌐 Viewport Options

缩放激活键码（可选）

🌐 zoom-activation-key-code (optional)

• 类型：KeyCode

• 默认：Meta

• 详细信息：

  定义一个可用于激活缩放功能的键。

  只要按下该键，就会覆盖滚动时缩放或滚动时平移的行为。

滚动缩放（可选）

🌐 zoom-on-scroll (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  在 Vue Flow 容器内滚动时是否允许放大和缩小。

捏合时缩放（可选）

🌐 zoom-on-pinch (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  在 Vue Flow 容器内捏合（触摸或触控板）时是否允许放大和缩小。

双击时缩放（可选）

🌐 zoom-on-double-click (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  在 Vue Flow 容器内双击（或点击）时是否允许放大和缩小。

滚动时平移（可选）

🌐 pan-on-scroll (optional)

• 类型：boolean

• 默认：false

• 详细信息：

  是否允许在 Vue Flow 容器内平移。

  不能与 zoom-on-scroll 一起使用，但可以与 zoom-activation-key-code 一起使用。

滚动时平移速度（可选）

🌐 pan-on-scroll-speed (optional)

• 类型：number
• 默认：0.5

滚动时平移模式（可选）

🌐 pan-on-scroll-mode (optional)

• 类型: PanOnScrollMode

• 默认：PanOnScrollMode.Free

• 详细信息：

  指定允许在哪个轴上平移（x、y 或两者）。

拖动时平移（可选）

🌐 pan-on-drag (optional)

• 旧名称：paneMovable

• 类型：boolean

• 默认：true

• 详细信息：

  在 Vue Flow 容器内拖动时是否允许移动窗格。

防止滚动（可选）

🌐 prevent-scrolling (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  启用此功能可防止 Vue Flow 在其容器内滚动，即允许页面滚动。

no-wheel-class-name（可选）

🌐 no-wheel-class-name (optional)

• 类型：string

• 默认：nowheel

• 详细信息：

  设置一个类名，防止元素触发滚轮滚动事件（从而禁用该元素上的缩放/平移滚动行为）。

  如果你想允许在节点内部滚动，这是很有用的

no-pan-class-name（可选）

🌐 no-pan-class-name (optional)

• 类型：string

• 默认：nopan

• 详细信息：

  设置一个类名，以防止元素触发平移滚动事件。

min-zoom（可选）

🌐 min-zoom (optional)

• 类型：number
• 默认：0.5

max-zoom（可选）

🌐 max-zoom (optional)

• 类型：number
• 默认：2

default-viewport（可选）

🌐 default-viewport (optional)

• 类型: ViewportTransform

• 默认：{ zoom: 1, position: { x: 0, y: 0 } }

• 详细信息：

  组件安装时的默认视口。

平移范围（可选）

🌐 translate-extent (optional)

• 类型: CoordinateExtent
• 默认值：

[
  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
]

• 详细信息：

  视口可移动的区域。

选择选项

🌐 Selection Options

选择键码（可选）

🌐 selection-key-code (optional)

• 类型：KeyCode

• 默认：Shift

• 详细信息：

  定义一个可用于激活选择矩形功能的键。

multi-selection-key-code（可选）

🌐 multi-selection-key-code (optional)

• 类型：KeyCode

• 默认：Meta

• 详细信息：

  定义一个可用于激活多选功能的键。

  可以使用多选功能通过点击选择多个节点。

delete-key-code（可选）

🌐 delete-key-code (optional)

• 类型：KeyCode

• 默认：Backspace

• 详细信息：

  定义一个可用于激活从窗格中移除元素功能的键。

全局节点选项

🌐 Global Node Options

nodes-draggable（可选）

🌐 nodes-draggable (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  全局启用/禁用拖动节点。

  可以通过在特定节点元素上设置 draggable 来覆盖。

• 示例：

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodesDraggable = ref(false)

const nodes = ref([
  { id: '1', position: { x: 250, y: 5 } },
  { 
    id: '2', 
    // This will overwrite the globally set option of nodes-draggable
    draggable: true, 
    position: { x: 100, y: 100 } 
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" :nodes-draggable="nodesDraggable" />
</template>

nodes-connectable（可选）

🌐 nodes-connectable (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  全局启用/禁用连接节点。

  可以通过在特定节点元素上设置 connectable 来覆盖。

• 示例：

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodesConnectable = ref(false)
  
const nodes = ref([
  { id: '1', position: { x: 250, y: 5 } },
  {
    id: '2',
    // This will overwrite the globally set option of nodes-connectable
    connectable: true,
    position: { x: 100, y: 100 }
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" :nodes-connectable="nodesConnectable" />
</template>

node-extent（可选）

🌐 node-extent (optional)

• 类型: CoordinateExtent
• 默认值：

[
  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
]

• 详细信息：

  节点可移动的区域。

  可以通过在特定节点元素上设置 extent 来覆盖。

• 示例：

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  { id: '1', position: { x: 250, y: 5 } },
  {
    id: '2',
    extent: [[-100, -100], [100, 100]],
    position: { x: 100, y: 100 }
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" />
</template>

拖动时选择节点（可选）

🌐 select-nodes-on-drag (optional)

• 类型：boolean
• 默认：true

捕捉到网格（可选）

🌐 snap-to-grid (optional)

• 类型：boolean

• 默认：false

• 详细信息：

  如果启用，节点将以网格方式放置和移动。

捕捉网格（可选）

🌐 snap-grid (optional)

• 类型: SnapGrid

• 默认：[15, 15]

• 详细信息：

  如果启用 snapToGrid，节点将根据 snapGrid 的值以网格状方式放置和移动。

全局边缘选项

🌐 Global Edge Options

edges-updatable （可选）

🌐 edges-updatable (optional)

• 类型：EdgeUpdatable

• 默认：true

• 详细信息：

  全局启用/禁用更新边缘。

  如果设置为“source”，则只有源标记可以更新

  如果设置为“目标”，则只有目标标记可以更新

  如果设置为“true”，源标记和目标标记都可以更新

  可以通过在特定边元素上设置 updatable 来覆盖。

• 示例：

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const edgesUpdatable = ref(false)
  
const nodes = ref([
  { id: '1', position: { x: 250, y: 5 } },
  { id: '2', position: { x: 100, y: 100 } },
])
  
const edges = ref([
  { id: 'e1->2', source: '1', target: '2' },
  { 
    id: 'e1->3',
    // Overwrites global edges-updatable config
    updatable: true, 
    source: '1', target: '3', 
  },
])
</script>
<template>
  <VueFlow :nodes="nodes" :edges="edges" :edges-updatable="edgesUpdatable" />
</template>

default-marker-color（可选）

🌐 default-marker-color (optional)

• 类型：string

• 默认：#b1b1b7

• 详细信息：

  显示边缘标记（箭头）时使用的默认颜色值。

edge-updater-radius（可选）

🌐 edge-updater-radius (optional)

• 类型：number

• 默认：10

• 详细信息：

  可触发边缘更新器的半径。

connect-on-click（可选）

🌐 connect-on-click (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  允许通过连续点击两个句柄来创建边。

  如果你希望在触摸设备上创建边，则此方法很有用。

default-edge-options（可选）

🌐 default-edge-options (optional)

• 类型: DefaultEdgeOptions

• 详细信息：

  创建新边时的默认值。

  不适用于 addEdge 工具！

auto-connect（可选）（已弃用）

🌐 auto-connect (optional) (deprecated)

• 类型：boolean | Connector

• 默认：false

• 详细信息：

  触发连接时，会自动根据参数创建新的边。

  也接受一个 Connector，它返回一个类似边的对象或 false（如果不允许创建边）。

  此选项可用作 onConnect((params) => addEdges([params])) 的简写。

示例

🌐 Examples

布尔值

🌐 Boolean value

<template>
  <VueFlow :auto-connect="true" />
</template>

连接器

🌐 Connector

<script setup>
import { ref } from 'vue'

const nodes = ref([/** ... */])

const edges = ref([/** ... */])

const connector = (params) => {
  if (params.source === params.target) {
    return false
  }
  
  return {
    id: `edge-${params.source}-${params.target}`,
    source: params.source,
    target: params.target,
    label: `Edge ${params.source}-${params.target}`,
    animated: true,
  }
}
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" :auto-connect="connector" />
</template>

elevate-edges-on-select（可选）

🌐 elevate-edges-on-select (optional)

• 类型：boolean

• 默认：false

• 详细信息：

  启用后，边将按 z-index 分组，并在选择它们连接的节点时提升。

  如果你想在节点顶部显示边，这将非常有用。

  默认情况下，边缘的 z-index 为 0。

全局元素选项

🌐 Global Element Options

only-render-visible-elements （可选）

🌐 only-render-visible-elements (optional)

• 类型：boolean

• 默认：false

• 详细信息：

  跳过渲染当前不可见的元素（隐藏或超出当前窗格尺寸）。

elements-selectable（可选）

🌐 elements-selectable (optional)

• 类型：boolean

• 默认：true

• 详细信息：

  启用/禁用选择元素。