自定义节点 (Custom Node)

在 yh-flow 中，节点不仅仅是一个带边框的矩形，它本质上是一个可以容纳任何 Vue 组件或 HTML 元素的 作用域插槽容器。这意味着您可以利用 CSS 动画、渐变、以及任何第三方 UI 组件来构建极致精美的节点。

高级自定义节点示例

下方展示了如何通过插槽方案实现一个具有“玻璃态”质感、动态呼吸灯效果以及内部交互逻辑的专业级自定义节点。

ID: premium-1

核心集群

管理来自边缘计算节点的聚合请求流。

ProductionUptime: 99.9%

玻璃态高级节点

实现注意事项

在通过插槽构建自定义节点时，请牢记以下核心行为：

1. 事件冒泡：标准的 DOM 事件（click、mousedown）将冒泡到 Flow 引擎，用于选择逻辑，除非您明确使用 .stop（例如，在节点内部按钮上使用 @click.stop）。画布交互（单击选中、拖拽移动、Ctrl+滚轮缩放、空白区拖拽平移）由 Flow 默认提供。
2. 选择反馈：使用插槽传递的 node.selected 布尔值来应用高亮样式（例如，更改边框颜色）。示例中已用 node.selected 控制选中时的边框与阴影，点击节点即可看到高亮。
3. 尺寸：如果内部布局复杂，请始终在节点数据中指定 width 和 height。这对于可预测的虚拟化和边路由计算是强制性的。

TIP

想要在单个侧边设置多个连接点？请查看节点类型下的 自定义连接点配置 部分。