插槽

🌐 Slots

Vue Flow 提供了多个用于自定义的插槽。除了节点和连线插槽（请参见关于 节点 和 连线 的指南）之外，还有许多其他插槽可以用来定制可视化效果。

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