插槽

¥Slots

Vue Flow 提供多个插槽用于自定义。除了节点和边插槽（请参阅 nodes 和 edges 指南）之外，还有许多其他插槽可用于自定义可视化效果。

¥Vue Flow provides several slots for customization. In addition to the node and edge slots (see the guide on nodes and edges), there are a number of other slots you can use to customize the visualization.

默认

¥Default

默认插槽可用于在 Vue Flow 封装器 <div> 中嵌套元素。它不会在视口内渲染，这意味着它不会进行缩放或定位变换。你可以使用默认插槽为图表添加侧边栏或浮动工具栏等。

¥The default slot can be used to nest elements inside the Vue Flow wrapper <div>. It will not be rendered inside the viewport, meaning it will not receive a transformation for scale or positioning. You can use the default slot to add a sidebar or floating toolbar etc. to your graph.

连接线

¥Connection Line

连接线插槽允许你传递自定义连接线组件，该组件将在触发连接时使用。

¥The connection line slot allows you to pass down a custom connection line component, which will be used, when a connection is triggered.

<template>
  

<VueFlow>
    <template #connection-line="connectionLineProps">
      <CustomConnectionLine v-bind="connectionLineProps" />
    </template>
  </VueFlow>


</template>

有关连接线属性的完整描述，请参阅 此处。

¥The full description of connection line props can be found here.

缩放窗格

¥Zoom Pane

缩放窗格插槽位于视口变换内部，以便它能够随着当前视口缩放和位置进行缩放和移动。

¥The zoom pane slot is placed inside the viewport transformation, so that it scales and moves with the current viewport zoom and position.

<template>
  

<VueFlow>
    <template #zoom-pane>
      <div>Some element inside the zoom pane</div>
    </template>
  </VueFlow>


</template>