配置

¥Configuration

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

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

选项/属性

¥Options / Props

Vue Flow 允许你配置缩放、图形和流程行为。配置可以作为 props 传递给 VueFlow 组件，也可以作为 options 传递给 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.

• 使用组件属性

  ¥Using Component Props

<!-- Pass configuration as props -->
<template>
  

<VueFlow :default-viewport="{ zoom: 0.5 }" :max-zoom="4" :min-zoom="0.1" />
</template>

Updating Config

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

• Using Component Props

<script setup>
const nodesDraggable = ref(false)

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


</template>

• 使用状态（可组合）

  ¥Using State (Composable)

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

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

基本选项

¥Basic Options

id（可选）

¥id (optional)

• 类型：string

  ¥Type: string

• 详细信息：

  ¥Details:

  Vue Flow 的唯一 ID。

  ¥Unique id of Vue Flow.

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

  ¥It is used for the lookup and injection of the state instance.

nodes（可选）

¥nodes (optional)

• 类型：Node[]

  ¥Type: Node[]

• 详细信息：

  ¥Details:

  节点数组。

  ¥An array of nodes.

  分别使用 modelValue 属性或节点。请勿混用！

  ¥Use either the modelValue prop or nodes separately. Do not mix them!

• 示例：

  ¥Example:

<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[]

  ¥Type: Edge[]

• 详细信息：

  ¥Details:

  边数组。

  ¥An array of edges.

  分别使用 modelValue 属性或边。请勿混用！

  ¥Use either the modelValue prop or edges separately. Do not mix them!

• 示例：

  ¥Example:

<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

  ¥Type: Elements

• 详细信息：

  ¥Details:

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

  ¥An array of elements (nodes + edges).

  分别使用 modelValue 属性或节点/边。请勿混用！

  ¥Use either the modelValue prop or nodes/edges separately. Do not mix them!

• 示例：

  ¥Example:

<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>

  ¥Type: Record<string, NodeComponent>

• 默认值：DefaultNodeTypes

  ¥Default: DefaultNodeTypes

• 详细信息：

  ¥Details:

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

  ¥An object mapping node-type names to component definitions/name.

• 示例：

  ¥Example:

<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>

  ¥Type: Record<string, EdgeComponent>

• 默认值：DefaultEdgeTypes

  ¥Default: DefaultEdgeTypes

• 详细信息：

  ¥Details:

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

  ¥An object mapping edge-type names to component definitions/name.

• 示例：

  ¥Example:

<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

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Enable/disable default state update handlers.

  如果你想完全控制状态变化，可以禁用默认行为，并将你自己的状态变化处理程序应用于状态。

  ¥If you want to have full control of state changes, you can disable the default behavior and apply your own change handlers to the state.

  查看 受控流 指南了解更多信息。

  ¥Check the controlled flow guide for more information.

• 示例：

  ¥Example:

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

connection-mode（可选）

¥connection-mode (optional)

• 类型：ConnectionMode

  ¥Type: ConnectionMode

• 默认值：ConnectionMode.Loose

  ¥Default: ConnectionMode.Loose

• 详细信息：

  ¥Details:

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

  ¥If set to loose all handles are treated as source handles (thus allowing for connections on target handles as well.)

connection-line-options

• 类型：ConnectionLineOptions

  ¥Type: ConnectionLineOptions

• 详细信息：

  ¥Details:

  连接线的选项。

  ¥Options for the connection line.

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

  ¥The options include the connection line type, style and possible marker types (marker-end/marker-start).

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

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

• 类型：ConnectionLineType

  ¥Type: ConnectionLineType

• 默认值：ConnectionLineType.Bezier

  ¥Default: ConnectionLineType.Bezier

• 详细信息：

  ¥Details:

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

  ¥The path to use when drawing a connection-line (bezier, step, smoothstep).

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

  ¥When using a custom connection line this prop does nothing.

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

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

• 类型：CSSProperties | null

  ¥Type: CSSProperties | null

• 详细信息：

  ¥Details:

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

  ¥Additional styles to add to the default connection-line.

fit-view-on-init（可选）

¥fit-view-on-init (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：false

  ¥Default: false

• 详细信息：

  ¥Details:

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

  ¥Trigger fit view when viewport is mounted.

视口选项

¥Viewport Options

缩放激活键码（可选）

¥zoom-activation-key-code (optional)

• 类型：KeyCode

  ¥Type: KeyCode

• 默认值：Meta

  ¥Default: Meta

• 详细信息：

  ¥Details:

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

  ¥Define a key which can be used to activate zoom.

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

  ¥Overwrites zoom-on-scroll or pan-on-scroll behavior as long as the key is pressed.

滚动缩放（可选）

¥zoom-on-scroll (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Whether to allow zooming in and out when scrolling inside the Vue Flow container.

捏合时缩放（可选）

¥zoom-on-pinch (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Whether to allow zooming in and out when pinching (touch or trackpad) inside the Vue Flow container.

双击时缩放（可选）

¥zoom-on-double-click (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Whether to allow zooming in and out when double-clicking (or tapping) inside the Vue Flow container.

滚动时平移（可选）

¥pan-on-scroll (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：false

  ¥Default: false

• 详细信息：

  ¥Details:

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

  ¥Whether to allow panning inside the Vue Flow container.

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

  ¥Does not work together with zoom-on-scroll but will work together with zoom-activation-key-code.

滚动时平移速度（可选）

¥pan-on-scroll-speed (optional)

• 类型：number

  ¥Type: number

• 默认值：0.5

  ¥Default: 0.5

滚动时平移模式（可选）

¥pan-on-scroll-mode (optional)

• 类型：PanOnScrollMode

  ¥Type: PanOnScrollMode

• 默认值：PanOnScrollMode.Free

  ¥Default: PanOnScrollMode.Free

• 详细信息：

  ¥Details:

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

  ¥Specify on which axis panning is allowed (x, y or both).

拖动时平移（可选）

¥pan-on-drag (optional)

• 旧名称：paneMovable

  ¥Old name: paneMovable

• 类型：boolean

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Whether to allow moving the pane when dragging inside the Vue Flow container.

防止滚动（可选）

¥prevent-scrolling (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Enable this to prevent vue flow from scrolling inside its container, i.e. allow for the page to scroll.

no-wheel-class-name（可选）

¥no-wheel-class-name (optional)

• 类型：string

  ¥Type: string

• 默认值：nowheel

  ¥Default: nowheel

• 详细信息：

  ¥Details:

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

  ¥Set a class name which prevents elements from triggering wheel-scroll events (thus disabling zoom/pan-scroll behavior on the element).

  如果你希望允许在节点内部滚动，则此方法很有用。

  ¥Useful if you want to allow for scrolling inside a node

no-pan-class-name（可选）

¥no-pan-class-name (optional)

• 类型：string

  ¥Type: string

• 默认值：nopan

  ¥Default: nopan

• 详细信息：

  ¥Details:

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

  ¥Set a class name which prevents elements from triggering pan-scroll events.

min-zoom（可选）

¥min-zoom (optional)

• 类型：number

  ¥Type: number

• 默认值：0.5

  ¥Default: 0.5

max-zoom（可选）

¥max-zoom (optional)

• 类型：number

  ¥Type: number

• 默认值：2

  ¥Default: 2

default-viewport（可选）

¥default-viewport (optional)

• 类型：ViewportTransform

  ¥Type: ViewportTransform

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

  ¥Default: { zoom: 1, position: { x: 0, y: 0 } }

• 详细信息：

  ¥Details:

  组件安装时的默认视口。

  ¥The default viewport when the component is mounted.

平移范围（可选）

¥translate-extent (optional)

• 类型：CoordinateExtent

  ¥Type: CoordinateExtent

• 默认值：

  ¥Default:

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

• 详细信息：

  ¥Details:

  视口可移动的区域。

  ¥The area in which the viewport can be moved around.

选择选项

¥Selection Options

选择键码（可选）

¥selection-key-code (optional)

• 类型：KeyCode

  ¥Type: KeyCode

• 默认值：Shift

  ¥Default: Shift

• 详细信息：

  ¥Details:

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

  ¥Define a key which can be used to activate the selection rect.

multi-selection-key-code（可选）

¥multi-selection-key-code (optional)

• 类型：KeyCode

  ¥Type: KeyCode

• 默认值：Meta

  ¥Default: Meta

• 详细信息：

  ¥Details:

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

  ¥Define a key which can be used to activate multi-selection.

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

  ¥Multi-selection can be used to select multiple nodes with clicks.

delete-key-code（可选）

¥delete-key-code (optional)

• 类型：KeyCode

  ¥Type: KeyCode

• 默认值：Backspace

  ¥Default: Backspace

• 详细信息：

  ¥Details:

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

  ¥Define a key which can be used to activate remove elements from the pane.

全局节点选项

¥Global Node Options

nodes-draggable（可选）

¥nodes-draggable (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Globally enable/disable dragging nodes.

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

  ¥Can be overwritten by setting draggable on a specific node element.

• 示例：

  ¥Example:

<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

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Globally enable/disable connecting nodes.

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

  ¥Can be overwritten by setting connectable on a specific node element.

• 示例：

  ¥Example:

<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

  ¥Type: CoordinateExtent

• 默认值：

  ¥Default:

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

• 详细信息：

  ¥Details:

  节点可移动的区域。

  ¥The area in which nodes can be moved around.

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

  ¥Can be overwritten by setting extent on a specific node element.

• 示例：

  ¥Example:

<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

  ¥Type: boolean

• 默认值：true

  ¥Default: true

捕捉到网格（可选）

¥snap-to-grid (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：false

  ¥Default: false

• 详细信息：

  ¥Details:

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

  ¥If enabled, nodes will be placed and moved in a grid-like fashion.

捕捉网格（可选）

¥snap-grid (optional)

• 类型：SnapGrid

  ¥Type: SnapGrid

• 默认值：[15, 15]

  ¥Default: [15, 15]

• 详细信息：

  ¥Details:

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

  ¥If snapToGrid is enabled, nodes will be placed and moved in a grid-like fashion according to the snapGrid value.

全局边缘选项

¥Global Edge Options

edges-updatable （可选）

¥edges-updatable (optional)

• 类型：EdgeUpdatable

  ¥Type: EdgeUpdatable

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Globally enable/disable updating edges.

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

  ¥If set to 'source' only source markers are updatable

  如果设置为 'target'，则只有目标标记可更新

  ¥If set to 'target' only target markers are updatable

  如果设置为 'true'，则源和目标标记均可更新

  ¥If set to 'true' both source and target markers are updatable

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

  ¥Can be overwritten by setting updatable on a specific edge element.

• 示例：

  ¥Example:

<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

  ¥Type: string

• 默认值：#b1b1b7

  ¥Default: #b1b1b7

• 详细信息：

  ¥Details:

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

  ¥The default color value which is used when presenting edge-markers (arrowheads).

edge-updater-radius（可选）

¥edge-updater-radius (optional)

• 类型：number

  ¥Type: number

• 默认值：10

  ¥Default: 10

• 详细信息：

  ¥Details:

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

  ¥The radius at which an edge-updater can be triggered.

connect-on-click（可选）

¥connect-on-click (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

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

  ¥Allow edges to be created by clicking two handles in a row.

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

  ¥Useful if you want to enable creating edges on a touch device.

default-edge-options（可选）

¥default-edge-options (optional)

• 类型：DefaultEdgeOptions

  ¥Type: DefaultEdgeOptions

• 详细信息：

  ¥Details:

  创建新边时的默认值。

  ¥Default values when creating a new edge.

  不适用于 addEdge 实用程序！

  ¥Does not work for the addEdge utility!

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

¥auto-connect (optional) (deprecated)

• 类型：boolean | Connector

  ¥Type: boolean | Connector

• 默认值：false

  ¥Default: false

• 详细信息：

  ¥Details:

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

  ¥When connection is emitted, automatically create a new edge from params.

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

  ¥Also accepts a Connector which returns an edge-like object or false (if creating an edge is not allowed).

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

  ¥This option can be used as a shorthand for 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

  ¥Type: boolean

• 默认值：false

  ¥Default: false

• 详细信息：

  ¥Details:

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

  ¥When enabled, edges will be grouped by z-index and elevated when the nodes they connect to are selected.

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

  ¥This is useful if you want to show the edges on top of the nodes.

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

  ¥By default, edges have a z-index of 0.

全局元素选项

¥Global Element Options

only-render-visible-elements （可选）

¥only-render-visible-elements (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：false

  ¥Default: false

• 详细信息：

  ¥Details:

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

  ¥Skip rendering elements that are not visible currently (either hidden or outside the current pane dimensions).

elements-selectable（可选）

¥elements-selectable (optional)

• 类型：boolean

  ¥Type: boolean

• 默认值：true

  ¥Default: true

• 详细信息：

  ¥Details:

  启用/禁用选择元素。这通常会禁用指针事件。

  ¥Enable/disable selecting elements. This will also disable pointer-events in general.