节点工具栏 (Node Toolbar)

为了提升用户的交互效率，您可能希望在用户选中某个节点时，在节点附近（上方、下方等）弹出一个浮动的快捷工具栏。yh-flow 的 NodeToolbar 组件利用 Vue 的 Teleport 技术，确保工具栏在任何画布缩放级别下都能清晰、准确地定位。

节点工具栏示例 (Node Toolbar Example)

点击选中下方的节点，观察其上方出现的快捷操作按钮。示例使用 v-model:nodes，以便选中状态同步到父组件，工具栏的显隐（依赖 node.selected）才能正确生效。

点击我查看工具栏

浮动快捷工具栏

API 概述

属性 (Props)

参数名	类型	默认值	说明
nodeId	string	必填	宿主节点 ID。
selected	boolean	false	是否显示工具栏（通常绑定 node.selected）。
position	string	'top'	相对位置。可选：top, bottom, left, right。
offset	number	10	工具栏距离节点边缘的像素偏移。

TIP

工具栏支持任何自定义的 Vue 插槽内容。我们强烈建议在您的按钮点击事件上使用 .stop 修饰符，以防止 Flow 引擎在工具栏背后触发选择或平移逻辑。