前端UI组件【免费下载链接】vue-flowA highly customizable Flowchart component for Vue 3. Features seamless zoom pan , additional components like a Minimap and utilities to interact with state and graph.项目地址https://gitcode.com/gh_mirrors/vu/vue-flow点击查看免费下载vue-flow/node-toolbar是 Vue FlowVue 3 流程图库官方扩展包提供与节点绑定的浮动工具栏组件。本文从安装配置、Props 与 Slots 用法、可见性控制、定位算法到源码级实现原理完整讲解如何在节点旁快速构建可交互的操作工具栏并带你理解其与 Vue Flow 核心的协作机制。包概述与定位NodeToolbar 是 Vue Flow 生态中的官方插件之一仓库位于packages/node-toolbar。其核心定位是在节点旁边创建一个浮动的工具栏用于承载删除、复制、展开等节点级操作按钮或在用户选中节点时自动浮现操作入口。从包结构看src/index.ts该包对外只导出两个东西NodeToolbar组件即NodeToolbar.vueNodeToolbarProps等类型定义src/types.ts包本身不包含 Vue Flow 核心代码仅声明了 peer 依赖package.jsonvue-flow/core:^1.23.0vue:^3.3.0这意味着使用 NodeToolbar 的前提是项目中已安装 Vue 3 与 Vue Flow 核心。安装与依赖安装命令# 使用 yarn yarn add vue-flow/node-toolbar # 或使用 npm npm install vue-flow/node-toolbarvue-flow/node-toolbar当前版本为 1.1.1见 CHANGELOG.md。与核心包的版本匹配NodeToolbar 使用 Vue Flow 核心的useVueFlow、Position枚举、NodeIdInjection节点上下文注入等 API因此必须与核心包版本保持兼容。仓库的 peer 依赖声明为^1.23.0实际使用时应确保vue-flow/core与vue-flow/node-toolbar版本匹配。快速上手把工具栏挂到自定义节点上NodeToolbar 通常是在自定义节点的模板内部使用的通过插槽与节点上下文自动关联到当前节点。第一步准备一个带自定义节点的流程图script setup import { ref } from vue import { VueFlow } from vue-flow/core import CustomNode from ./CustomNode.vue // 节点与边数据 const nodes ref([ { id: 1, type: custom, position: { x: 0, y: 0 }, data: { label: 节点 A } }, ]) /script template VueFlow :nodesnodes fit-view-on-init template #node-customnodeProps CustomNode :datanodeProps.data :labelnodeProps.label / /template /VueFlow /template第二步在自定义节点内部放置 NodeToolbarscript langts setup import { Handle, Position } from vue-flow/core import { NodeToolbar } from vue-flow/node-toolbar interface NodeData { toolbarVisible: boolean toolbarPosition: Position } interface Props { data: NodeData label: string } definePropsProps() /script template !-- 通过 is-visible 强制显示position 控制出现方位 -- NodeToolbar :is-visibledata.toolbarVisible :positiondata.toolbarPosition buttondelete/button buttoncopy/button buttonexpand/button /NodeToolbar !-- 节点本体 -- div :style{ padding: 10px 20px } {{ label }} /div !-- 连接点 -- Handle typetarget :positionPosition.Left / Handle typesource :positionPosition.Right / /template关键点未显式传入nodeId时NodeToolbar 通过 Vue 的依赖注入机制自动获取当前所在节点的 id详见下文源码分析工具栏内容通过默认插槽任意定制不限于按钮节点数据data中可以携带toolbarVisible、toolbarPosition等字段实现每个节点各自的工具栏配置。Props 详解NodeToolbar 的 Props 定义在 src/types.ts官方文档docs/src/guide/components/node-toolbar.md汇总如下名称定义类型可选默认值nodeId工具栏要挂载到的节点或节点数组string \| string[]是上下文中的节点 IDisVisible强制控制工具栏可见性boolean是节点被选中position工具栏出现方位top / left / right / bottomPosition是Position.Topoffset工具栏与节点的间距number是10align工具栏沿节点边的对齐方式center / start / endcenter \| start \| end是centernodeId多节点共享一个工具栏nodeId支持传入单个字符串或字符串数组这是把一个工具栏同时服务多个节点的关键能力NodeToolbar :node-id[node-a, node-b] positionbottom button批量操作/button /NodeToolbar此时工具栏的定位基准是这些节点外接矩形的包围盒见下方“定位算法”适合对一组节点做批量操作。isVisible两种显示模式不传isVisible默认行为是“节点被选中时自动显示工具栏”仅当恰好选中 1 个节点且该节点就是工具栏所属节点时传入布尔值完全由你控制显隐比如结合data.toolbarVisible做“常驻工具栏”或“悬停显示”。从源码NodeToolbar.vue看判定逻辑是const isActive computed(() typeof props.isVisible boolean ? props.isVisible : nodes.value.length 1 nodes.value[0].selected getSelectedNodes.value.length 1, )即只有当你显式传入isVisible时才以你的值为准否则要求当前选中节点唯一且恰好是工具栏绑定的节点。1.1.1 版本将isVisible的默认值改为undefined见 CHANGELOG.md正是为了让“是否显式传入布尔值”这一判断可被可靠区分。position与offset方位与间距position使用核心包导出的Position枚举定义于 packages/core/src/types/flow.tsexport enum Position { Left left, Top top, Right right, Bottom bottom, }offset默认10表示工具栏与节点边缘之间的像素距离。align沿节点边的对齐方式1.1.0 新增align是 1.1.0 版本新增的 Prop见 CHANGELOG.md控制工具栏沿节点边top 边或 left/right 边的对齐位置center默认居中对齐start靠起点对齐顶部工具栏靠左、底部靠左、左右侧工具栏靠上end靠终点对齐顶部工具栏靠右、底部靠右、左右侧工具栏靠下。该参数在源码中被映射为一个 0~1 的alignmentOffset参与坐标计算见下文公式。SlotsNodeToolbar 只暴露一个默认插槽docs/src/guide/components/node-toolbar.md名称定义default工具栏内容任意元素或组件工具栏容器默认带有vue-flow__node-toolbar类名可通过全局 CSS 定制样式参考 docs/examples/node-toolbar/App.vue 中的示例样式flex 布局、背景色、圆角、阴影等。源码级原理工具栏如何“跟随”节点要真正用好 NodeToolbar理解其底层实现非常关键。核心源码在 packages/node-toolbar/src/NodeToolbar.vue。1. 自动绑定当前节点依赖注入const contextNodeId inject(NodeIdInjection, null)当自定义节点在#node-xxx插槽中被渲染时Vue Flow 核心会向该子树注入当前节点 id。因此在节点模板内部直接写NodeToolbar时无需手动传nodeId若在节点外部使用则必须显式传nodeId。2. 收集目标节点const nodes computed(() { const nodeIds Array.isArray(props.nodeId) ? props.nodeId : [props.nodeId || contextNodeId || ] return nodeIds.reduceGraphNode[]((acc, id) { const node findNode(id) if (node) acc.push(node) return acc }, []) })通过核心包useVueFlow()提供的findNode查找节点对象支持单节点与多节点。3. 包围盒计算工具栏的定位基准是所有目标节点的外接矩形const nodeRect computed(() getRectOfNodes(nodes.value))getRectOfNodes是核心包工具函数packages/core/src/utils/graph.ts它遍历节点合并每个节点computedPosition位置与dimensions尺寸求出覆盖所有节点的最小矩形bounding box。4. 分层zIndex 自动提升const zIndex computed(() Math.max(...nodes.value.map((node) (node.computedPosition.z || 1) 1)))工具栏的 z-index 恒为其绑定节点的 z 值 1确保工具栏永远浮于节点之上即使多个节点重叠也不会被遮挡。5. 定位公式function getTransform(nodeRect, transform, position, offset, align): string { let alignmentOffset 0.5 if (align start) alignmentOffset 0 else if (align end) alignmentOffset 1 // ...按 position 计算 pos 与 shift return translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%) }以Position.Top为例pos (nodeRect.x nodeRect.width * alignmentOffset) * zoom viewport.x , nodeRect.y * zoom viewport.y - offset shift [-100 * alignmentOffset, -100]第一部分translate(px)把工具栏放到节点包围盒的对应边缘并乘以当前缩放系数zoom并加上视口平移transform.x/y保证与画布坐标一致第二部分translate(%)用百分比再做一次平移实现“以节点边/中心为锚点、以工具栏自身尺寸为基准”的对齐百分比位移基于元素自身宽度/高度因此即使工具栏内容大小不同也能正确对齐。该公式同时处理了Right、Bottom、Left三个方位NodeToolbar.vue这正是工具栏能随画布缩放平移而始终贴在节点旁的原因。6. 渲染Teleport 到视口容器Teleport :toviewportRef :disabled!viewportRef div v-ifisActive nodes.length v-bind$attrs :stylewrapperStyle classvue-flow__node-toolbar slot / /div /Teleport工具栏通过Teleport挂载到核心包的视口 DOM 容器viewportRef中从而与节点一样处于同一坐标变换体系之下同时只有isActive为真且存在目标节点时才渲染。7. 兼容性与属性透传组件以compatConfig: { MODE: 3 }声明兼容vue/compat过渡模式1.0.5 变更见 CHANGELOG.md并设置inheritAttrs: false以便通过v-bind$attrs把外部属性手动应用到工具栏容器上。实战示例完整可运行方案仓库自带的演示位于 docs/examples/node-toolbar/App.vue展示了五种典型场景节点配置效果节点 1toolbarPosition: Position.Top工具栏显示在节点上方节点 2toolbarPosition: Position.Right工具栏显示在节点右侧节点 3toolbarPosition: Position.Bottom工具栏显示在节点下方节点 4toolbarPosition: Position.Left工具栏显示在节点左侧节点 5toolbarVisible: true常驻显示不依赖选中状态对应的节点实现docs/examples/node-toolbar/ToolbarNode.vue展示了两个进阶用法工具栏内操作节点数据通过useVueFlow()的updateNodeData更新节点data.action实现“选中某个表情”这类节点级状态变更const { updateNodeData } useVueFlow() // 点击按钮时 updateNodeData(props.id, { action })结合选中态做样式反馈利用节点自身的.selected类示例中给.vue-flow__node-menu.selected加了蓝色描边配合默认选中时显示工具栏的行为形成完整的“选中即出现操作栏”交互闭环。样式定制建议工具栏容器类名为vue-flow__node-toolbar官方示例docs/examples/node-toolbar/App.vue给出了不错的起点.vue-flow__node-toolbar { display: flex; gap: 0.5rem; align-items: center; background-color: #2d3748; padding: 8px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }也可以直接在 NodeToolbar 上绑定 class / style因为组件会通过$attrs把它们透传到工具栏容器上。版本演进速览根据 packages/node-toolbar/CHANGELOG.md该包的关键演进如下1.0.0新增 node-toolbar 包#4761.0.1改用重命名后的ViewportTransform类型#5531.0.2等待视口 ref 可用后再进行 Teleport避免渲染时机问题#5691.0.3修正 package.json 的main字段1.0.4升级 Vite 4 并更新依赖#6161.0.5增加 compat 模式以兼容vue/compat#6821.0.6修正 UMD 包名使用正确的核心包 UMD 名称#7161.0.7在 package.json 中新增exports字段#8651.1.0新增alignProp#9531.1.1isVisible默认值改为undefined#1785。其中两个变更对使用者影响最大1.1.0 的align让工具栏对齐更灵活1.1.1 的isVisible默认值调整修正了“未显式传入时默认跟随选中态”的判断逻辑升级后建议重新验证自定义节点的工具栏显隐行为。小结NodeToolbar 通过依赖注入自动绑定节点、基于包围盒与视口变换计算定位、借助 Teleport 与核心视图保持同步并以isVisible双模式强制显示 / 跟随选中提供灵活的显隐控制。无论是单节点操作、多节点批量工具栏还是“选中即弹出”的交互设计它都能与 Vue Flow 核心无缝协作是扩展节点交互能力的高性价比组件。赞分享前端UI组件【免费下载链接】vue-flowA highly customizable Flowchart component for Vue 3. Features seamless zoom pan , additional components like a Minimap and utilities to interact with state and graph.项目地址https://gitcode.com/gh_mirrors/vu/vue-flow点击查看免费下载相关推荐Vue Flow NodeToolbar 节点悬浮工具栏组件使用与源码解析Vue Flow NodeToolbar 节点悬浮工具栏组件使用与源码解析 本指南围绕 Vue Flow 官方插件 vue flow/node toolbar前端UI组件Vue Flow Node Toolbar 组件完全指南为节点打造浮动工具栏Vue Flow Node Toolbar 组件完全指南为节点打造浮动工具栏 NodeToolbar 是 Vue Flow 生态中的官方附加组件additi前端UI组件awesome-blender完整指南10分钟吃透数百个免费Blender插件与纹理资源awesome blender完整指南10分钟吃透数百个免费Blender插件与纹理资源 awesome blender是一个持续维护的开源清单项目把数百个前端UI组件上一篇IntelliJ Platform 结构搜索与替换Structural Search and Replace配置实战基于 intellij-community 的 SSR 规则编写指南下一篇tsParticles Colored Smoke Rainbow 调色板安装、配置与源码机制解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考