传送节点 (Teleport Node)

在复杂的流程图应用中，您可能会在某个节点上放置复杂的悬浮工具栏或弹出层（Modal/Dialog）。由于 SVG 或者拖拽画布中存在各种 overflow: hidden、复杂的 z-index 堆栈，以及频繁刷新的 CSS Transforms，如果您直接在节点 HTML 内渲染浮层，不可避免地会遇到裁剪和坐标异常。

这时候，最优雅的解决方案是利用 Vue 的 <Teleport> 内置组件。这再一次彰显了 yh-flow 的节点即 Vue Template 的核心优势！

Teleport 浮出层示例

点击下方的 "配置节点" 按钮，它会在节点内部修改状态，弹出一个全局层级的对话框。

可点击锚点

跨上下文弹窗

为什么使用 Teleport？

坐标系逃逸：Flow 数据层使用了 transform: translate3d。在大多数浏览器中，这会为所有绝对/固定定位的子元素创建一个新的包含块。通过传送，您可以“浮出”到一个没有变换的父容器中，保持 UI 标准。
防止裁剪：引擎在视口上使用 overflow: hidden。任何超出节点边界的子元素都会被剪裁。Teleport 完全避开了这一点。
Z-Index 一致性：它确保您的模态框始终出现在所有节点和连线之上，无论节点的内部堆叠顺序或渲染优先级如何。