 NavigationMenuContent 深度解析：挂载控制、DismissableLayer 关闭机制与 data-motion 动画体系)
radix-vue (Reka UI) NavigationMenuContent 深度解析挂载控制、DismissableLayer 关闭机制与 contenteditable="false">【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vueNavigationMenuContent是 Reka UIradix-vue导航菜单组件中承载“每个 Trigger 对应内容”的核心部件负责内容的开合状态管理、渲染位置Teleport 至 Viewport、焦点管理与外部交互关闭等职责。本文以 NavigationMenuContent 的 API 元文档 为骨架完整覆盖其 Props、Events 与数据属性并结合 源码实现 深入剖析forceMount、Presence、DismissableLayer与data-motion动画体系的底层原理帮助你既能正确使用该组件也能理解 Vue 动画库集成与高级动画场景的底层支撑机制。NavigationMenuContent 在组件体系中的位置NavigationMenuContent不是孤立组件而是NavigationMenu家族中“Trigger—Content”配对结构的一半。完整的组件组装方式如下引自 官方组件文档 的 Anatomy 一节script setup langts import { NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuSub, NavigationMenuTrigger, NavigationMenuViewport, } from reka-ui /script template NavigationMenuRoot NavigationMenuList NavigationMenuItem NavigationMenuTrigger / NavigationMenuContent NavigationMenuLink / /NavigationMenuContent /NavigationMenuItem NavigationMenuItem NavigationMenuLink / /NavigationMenuItem NavigationMenuItem NavigationMenuTrigger / NavigationMenuContent NavigationMenuSub NavigationMenuList / NavigationMenuViewport / /NavigationMenuSub /NavigationMenuContent /NavigationMenuItem NavigationMenuIndicator / /NavigationMenuList NavigationMenuViewport / /NavigationMenuRoot /template从源码结构看NavigationMenuContent的渲染生命周期由三层协作决定父级NavigationMenuRoot的上下文modelValue当前激活的 item value、viewport可选视口元素、unmountOnHide关闭时是否卸载默认true见 NavigationMenuRoot.vueNavigationMenuContent外壳组件基于Presence与Teleport决定“内容是否渲染、渲染到哪里”NavigationMenuContentImpl实现组件内部是DismissableLayer处理关闭事件、焦点管理、键盘导航并对外抛出元文档中列出的全部事件。API 参考Props以下 Props 表格完整继承自 NavigationMenuContent.md其中disableOutsidePointerEvents实际定义在底层 DismissableLayer 的 Props 接口 中通过NavigationMenuContentImplProps extends DismissableLayerProps继承而来。名称说明类型必填默认值as该组件应渲染的元素或组件。可被asChild覆盖。AsTag \| Component否divasChild将默认渲染的元素替换为作为子元素传入的元素并合并二者的 props 与行为组合式写法。boolean否-disableOutsidePointerEvents为true时位于DismissableLayer外部的元素将禁用 hover/focus/click 交互。用户需要点击外部元素两次第一次关闭DismissableLayer第二次才真正触发该元素。boolean否-forceMount在需要更多控制时使用强制挂载内容。适用于用 Vue 动画库控制动画的场景例如Transition需要子元素始终存在。boolean否-forceMount 的源码行为forceMount是NavigationMenuContent外壳组件在实现组件之上唯一新增的 Prop见 NavigationMenuContent.vue它直接影响Presence的present判定Presence v-slot{ present } :presentforceMount || open || isLastActiveValue :force-mount!menuContext.unmountOnHide.value 即当forceMount为true时无论菜单是否打开内容节点都会保持挂载hidden属性仅作为可见性标记。这使得你可以完全接管进入/离开动画如配合Transition或 vueuse 动画工具而不用与组件内部的“开关”状态机竞争。isLastActiveValue是另一处容易被忽略的细节见 NavigationMenuContent.vue// We persist the last active content value as the viewport may be animating out // and we want the content to remain mounted for the lifecycle of the viewport. const isLastActiveValue computed(() { if (menuContext.viewport.value) { if (!menuContext.modelValue.value menuContext.previousValue.value) return (menuContext.previousValue.value itemContext.value) } return false })注释解释了动机当存在Viewport且菜单正在关闭时上一个激活的内容会继续保留挂载以保证退出动画在视口生命周期内完整播放避免动画被提前中断。API 参考Events均支持 preventDefault以下事件表格完整继承自 NavigationMenuContent.md。这 4 个事件正是DismissableLayer的标准事件集NavigationMenuContentImplEmits DismissableLayerEmits全部“可被阻止”Can be prevented——调用event.preventDefault()即可阻止默认的关闭行为。名称说明类型escapeKeyDown按下 Escape 键时触发的事件处理函数。可阻止。[event: KeyboardEvent]focusOutside焦点移出DismissableLayer时触发的事件处理函数。可阻止。[event: FocusOutsideEvent]interactOutside在DismissableLayer外部发生交互时触发。具体包括外部发生pointerdown事件或焦点移出。可阻止。[event: PointerDownOutsideEvent \| FocusOutsideEvent]pointerDownOutside在DismissableLayer外部发生pointerdown事件时触发。可阻止。[event: PointerDownOutsideEvent]事件背后的关闭逻辑外壳组件负责把实现组件的原始事件“翻译”为对外 emit见 NavigationMenuContent.vuepointer-down-outsideemits(pointerDownOutside, $event) focus-outsideemits(focusOutside, $event) interact-outsideemits(interactOutside, $event)而实现组件内部在转发之后还会执行组件自身的默认关闭策略并刻意做了几处豁免见 NavigationMenuContentImpl.vuefunction handlePointerDownOutside(ev: PointerDownOutsideEvent) { emits(pointerDownOutside, ev) if (!ev.defaultPrevented) { const target ev.target as HTMLElement const isTrigger getItems().some(i i.ref.contains(target)) const isRootViewport menuContext.isRootMenu menuContext.viewport.value?.contains(target) if (isTrigger || isRootViewport || !menuContext.isRootMenu) ev.preventDefault() } }这段逻辑说明点击其他 Trigger、点击根级 Viewport 内部、或在子菜单非 root场景下发生的外部指针事件都不会触发关闭——这正是“在下拉面板内切换菜单项时不闪断”的关键。焦点侧同理NavigationMenuContentImpl.vue焦点落在data-navigation-menu-trigger上会阻止关闭焦点仍停留在根导航菜单 DOM 内部时也只更新状态、不关闭内容。Escape 关闭的处理则同时完成三件事关闭菜单、把焦点还给对应 Trigger、记录wasEscapeCloseRef供 Trigger 侧的 hover 逻辑判断避免关闭后立刻又被 hover 打开见 NavigationMenuContentImpl.vuefunction handleEscapeKeyDown(ev: KeyboardEvent) { emits(escapeKeyDown, ev) if (!ev.defaultPrevented) { menuContext.onItemDismiss() itemContext.triggerRef?.value?.focus() itemContext.wasEscapeCloseRef.value true } }数据属性Data Attributes组件会渲染以下数据属性可用于 CSS 选择器驱动样式与动画引自 官方组件文档 的 Content 小节属性取值[data-state]open|closed[data-motion]to-start|to-end|from-start|from-end[data-orientation]vertical|horizontaldata-state由工具函数生成getOpenState(open)直接返回open或closed见 utils.ts。data-motion 的推导原理data-motion是高级动画的核心钩子。它由一个 computed 根据“当前激活项索引”与“上一个激活项索引”的关系推导见 NavigationMenuContentImpl.vueconst motionAttribute computed(() { const values getItems().map(i i.ref.id.split(trigger-)[1]) if (menuContext.dir.value rtl) values.reverse() const index values.indexOf(menuContext.modelValue.value) const prevIndex values.indexOf(menuContext.previousValue.value) // ... const attribute (() { // Dont provide a direction on the initial open if (index ! prevIndex) { // 从另一项进入本项 if (isSelected prevIndex ! -1) return index prevIndex ? from-end : from-start // 从本项离开去另一项 if (wasSelected index ! -1) return index prevIndex ? to-start : to-end } return null })() prevMotionAttributeRef.value attribute return attribute })语义归纳从左侧索引更小的项切换到本项时本项标记from-end进入方向来自末端反向切换为from-start当前激活项被关闭、用户切往右侧项时该项标记to-end退出方向朝向末端左侧则to-start首次打开无prevIndex与直接关闭离开列表时不设置方向即保持上一次的值或直接为空——源码注释明确说明“只为 selected 和 last selected 内容更新方向避免该范围之外的动画被打断”dirrtl时索引数组会反转保证右到左布局下方向语义依然正确。配套地Root组件还通过--reka-navigation-menu-viewport-width/heightCSS 变量暴露视口尺寸由激活内容计算得出二者结合即可实现官方文档给出的“高级动画”方案/* 引自 docs/content/docs/components/navigation-menu.md */ .NavigationMenuContent { position: absolute; top: 0; left: 0; animation-duration: 250ms; animation-timing-function: ease; } .NavigationMenuContent[data-motionfrom-start] { animation-name: enterFromLeft; } .NavigationMenuContent[data-motionfrom-end] { animation-name: enterFromRight; } .NavigationMenuContent[data-motionto-start] { animation-name: exitToLeft; } .NavigationMenuContent[data-motionto-end] { animation-name: exitToRight; } .NavigationMenuViewport { position: relative; width: var(--reka-navigation-menu-viewport-width); height: var(--reka-navigation-menu-viewport-height); transition: width, height, 250ms ease; } keyframes enterFromRight { from { opacity: 0; transform: translateX(200px); } to { opacity: 1; transform: translateX(0); } } /* enterFromLeft / exitToRight / exitToLeft 同理方向取反 */template NavigationMenuRoot NavigationMenuList NavigationMenuItem NavigationMenuTriggerItem one/NavigationMenuTrigger NavigationMenuContent classNavigationMenuContent Item one content /NavigationMenuContent /NavigationMenuItem NavigationMenuItem NavigationMenuTriggerItem two/NavigationMenuTrigger NavigationMenuContent classNavigationMenuContent Item two content /NavigationMenuContent /NavigationMenuItem /NavigationMenuList NavigationMenuViewport classNavigationMenuViewport / /NavigationMenuRoot /templateTeleport 与 Viewport内容渲染在哪里外壳组件的模板揭示了渲染位置策略见 NavigationMenuContent.vueTeleport :toisClient menuContext.viewport.value ? menuContext.viewport.value : body :disabledisClient menuContext.viewport.value ? !menuContext.viewport.value : true 提供NavigationMenuViewport时所有激活的内容会被Teleport 到视口元素内从而支持“列表与内容分离”的灵活布局对应官方文档 Flexible layouts 示例内容统一渲染在根级NavigationMenuViewport处Tab 焦点由组件自动维持未提供视口时内容渲染回退到body配合 CSS 绝对定位。此外还有一处对交互的细粒度控制根级菜单下未激活的内容会被置为pointer-events: none:style{ pointerEvents: !open menuContext.isRootMenu ? none : undefined }保证关闭状态下的残留 DOM 不会拦截鼠标事件。悬停进出事件也挂在外壳上pointerentermenuContext.onContentEnter(...)用于“指针进入内容区即取消关闭计时”pointerleave则通过 whenMouse 限定只对pointerType mouse生效触屏/触控笔不触发延迟关闭逻辑。可访问性与键盘交互NavigationMenuContentImpl在渲染时通过:aria-labelledbytriggerId把内容与其 Trigger 建立可访问名称关联triggerId由 makeTriggerId 生成为${baseId}-trigger-${value}形式这是 ARIA 层面“内容归属于哪个触发按钮”的直接证据。键盘行为集中在 NavigationMenuContentImpl.vue 的 handleKeydownTab / ShiftTab通过 getTabbableCandidates基于TreeWalker跳过disabled、hidden、input[typehidden]且以运行时tabIndex 0为准收集可聚焦候选按视觉顺序前进/后退到达边界时聚焦 item 的 focus proxy交给浏览器处理跨出菜单的 Tab 行为从而保持文档承诺的“managed tab focus”方向键委托useArrowNavigation在候选间移动焦点loop: false并在目标不是当前根菜单时直接返回防止父级菜单误触发Escape关闭内容并回焦 Trigger见上节关闭广播非 root 内容关闭时通过EVENT_ROOT_CONTENT_DISMISS自定义气泡事件navigationMenu.rootContentDismiss向上传播由根级Root统一处理关闭与回焦——子菜单内容的 dismiss 因此能冒泡到整棵菜单树。unmountOnHide 与卸载语义Root的unmountOnHide默认true决定了Presence的force-mount取值:force-mount!menuContext.unmountOnHide.value。也就是说默认行为内容关闭后从 DOM 中卸载设置unmountOnHidefalse后内容保留在 DOM中通过hidden属性控制可见性——适合需要保留内部状态如表单输入或让 CSS 动画接管显隐的场景仓库中 NavigationMenuUnmountOnHideFalse.vue 即为该模式的测试夹具。相关行为在 NavigationMenu.test.ts 中有覆盖例如pointerleavepointerType: mouse后根级内容节点被移除expect(findContent().exists()).toBe(false)以及“内容二的 dismiss 处理提前返回、内容一保持打开”的多内容共存断言等。典型用法速查基础用法内容直接挂在 Item 内无 Viewportscript setup langts import { NavigationMenuContent, NavigationMenuItem, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, } from reka-ui /script template NavigationMenuRoot NavigationMenuList NavigationMenuItem NavigationMenuTriggerItem one/NavigationMenuTrigger NavigationMenuContentItem one content/NavigationMenuContent /NavigationMenuItem NavigationMenuItem NavigationMenuTriggerItem two/NavigationMenuTrigger NavigationMenuContentItem two content/NavigationMenuContent /NavigationMenuItem /NavigationMenuList /NavigationMenuRoot /template垂直菜单通过 Root 的orientationvertical切换data-orientation属性会同步变化。受控关闭事件可阻止的典型应用NavigationMenuContent escape-key-downonEscape interact-outside(e) !confirm(离开菜单?) e.preventDefault() 动画控制forceMount 自行监听data-state切换hidden/class即可把进入/退出动画完全交给 Vue 动画库。相关文件索引文件作用docs/content/meta/NavigationMenuContent.md本文档Content 部件的 Props/Events 自动生成元数据packages/core/src/NavigationMenu/NavigationMenuContent.vue外壳forceMount、Presence、Teleport、pointer 进出packages/core/src/NavigationMenu/NavigationMenuContentImpl.vue实现DismissableLayer、data-motion、键盘与关闭逻辑packages/core/src/NavigationMenu/utils.tsgetOpenState、getTabbableCandidates、whenMouse等工具packages/core/src/NavigationMenu/NavigationMenuRoot.vue菜单上下文modelValue、unmountOnHide、viewport、延迟开关packages/core/src/DismissableLayer/DismissableLayer.vue外部交互事件的来源disableOutsidePointerEvents等packages/core/src/NavigationMenu/NavigationMenu.test.ts关闭/悬停/多内容并存的测试断言docs/content/docs/components/navigation-menu.md组件完整文档Anatomy、数据属性、示例与可访问性【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
radix-vue (Reka UI) NavigationMenuContent 深度解析挂载控制、DismissableLayer 关闭机制与 contenteditable="false">【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vueNavigationMenuContent是 Reka UIradix-vue导航菜单组件中承载“每个 Trigger 对应内容”的核心部件负责内容的开合状态管理、渲染位置Teleport 至 Viewport、焦点管理与外部交互关闭等职责。本文以 NavigationMenuContent 的 API 元文档 为骨架完整覆盖其 Props、Events 与数据属性并结合 源码实现 深入剖析forceMount、Presence、DismissableLayer与data-motion动画体系的底层原理帮助你既能正确使用该组件也能理解 Vue 动画库集成与高级动画场景的底层支撑机制。NavigationMenuContent 在组件体系中的位置NavigationMenuContent不是孤立组件而是NavigationMenu家族中“Trigger—Content”配对结构的一半。完整的组件组装方式如下引自 官方组件文档 的 Anatomy 一节script setup langts import { NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuSub, NavigationMenuTrigger, NavigationMenuViewport, } from reka-ui /script template NavigationMenuRoot NavigationMenuList NavigationMenuItem NavigationMenuTrigger / NavigationMenuContent NavigationMenuLink / /NavigationMenuContent /NavigationMenuItem NavigationMenuItem NavigationMenuLink / /NavigationMenuItem NavigationMenuItem NavigationMenuTrigger / NavigationMenuContent NavigationMenuSub NavigationMenuList / NavigationMenuViewport / /NavigationMenuSub /NavigationMenuContent /NavigationMenuItem NavigationMenuIndicator / /NavigationMenuList NavigationMenuViewport / /NavigationMenuRoot /template从源码结构看NavigationMenuContent的渲染生命周期由三层协作决定父级NavigationMenuRoot的上下文modelValue当前激活的 item value、viewport可选视口元素、unmountOnHide关闭时是否卸载默认true见 NavigationMenuRoot.vueNavigationMenuContent外壳组件基于Presence与Teleport决定“内容是否渲染、渲染到哪里”NavigationMenuContentImpl实现组件内部是DismissableLayer处理关闭事件、焦点管理、键盘导航并对外抛出元文档中列出的全部事件。API 参考Props以下 Props 表格完整继承自 NavigationMenuContent.md其中disableOutsidePointerEvents实际定义在底层 DismissableLayer 的 Props 接口 中通过NavigationMenuContentImplProps extends DismissableLayerProps继承而来。名称说明类型必填默认值as该组件应渲染的元素或组件。可被asChild覆盖。AsTag \| Component否divasChild将默认渲染的元素替换为作为子元素传入的元素并合并二者的 props 与行为组合式写法。boolean否-disableOutsidePointerEvents为true时位于DismissableLayer外部的元素将禁用 hover/focus/click 交互。用户需要点击外部元素两次第一次关闭DismissableLayer第二次才真正触发该元素。boolean否-forceMount在需要更多控制时使用强制挂载内容。适用于用 Vue 动画库控制动画的场景例如Transition需要子元素始终存在。boolean否-forceMount 的源码行为forceMount是NavigationMenuContent外壳组件在实现组件之上唯一新增的 Prop见 NavigationMenuContent.vue它直接影响Presence的present判定Presence v-slot{ present } :presentforceMount || open || isLastActiveValue :force-mount!menuContext.unmountOnHide.value 即当forceMount为true时无论菜单是否打开内容节点都会保持挂载hidden属性仅作为可见性标记。这使得你可以完全接管进入/离开动画如配合Transition或 vueuse 动画工具而不用与组件内部的“开关”状态机竞争。isLastActiveValue是另一处容易被忽略的细节见 NavigationMenuContent.vue// We persist the last active content value as the viewport may be animating out // and we want the content to remain mounted for the lifecycle of the viewport. const isLastActiveValue computed(() { if (menuContext.viewport.value) { if (!menuContext.modelValue.value menuContext.previousValue.value) return (menuContext.previousValue.value itemContext.value) } return false })注释解释了动机当存在Viewport且菜单正在关闭时上一个激活的内容会继续保留挂载以保证退出动画在视口生命周期内完整播放避免动画被提前中断。API 参考Events均支持 preventDefault以下事件表格完整继承自 NavigationMenuContent.md。这 4 个事件正是DismissableLayer的标准事件集NavigationMenuContentImplEmits DismissableLayerEmits全部“可被阻止”Can be prevented——调用event.preventDefault()即可阻止默认的关闭行为。名称说明类型escapeKeyDown按下 Escape 键时触发的事件处理函数。可阻止。[event: KeyboardEvent]focusOutside焦点移出DismissableLayer时触发的事件处理函数。可阻止。[event: FocusOutsideEvent]interactOutside在DismissableLayer外部发生交互时触发。具体包括外部发生pointerdown事件或焦点移出。可阻止。[event: PointerDownOutsideEvent \| FocusOutsideEvent]pointerDownOutside在DismissableLayer外部发生pointerdown事件时触发。可阻止。[event: PointerDownOutsideEvent]事件背后的关闭逻辑外壳组件负责把实现组件的原始事件“翻译”为对外 emit见 NavigationMenuContent.vuepointer-down-outsideemits(pointerDownOutside, $event) focus-outsideemits(focusOutside, $event) interact-outsideemits(interactOutside, $event)而实现组件内部在转发之后还会执行组件自身的默认关闭策略并刻意做了几处豁免见 NavigationMenuContentImpl.vuefunction handlePointerDownOutside(ev: PointerDownOutsideEvent) { emits(pointerDownOutside, ev) if (!ev.defaultPrevented) { const target ev.target as HTMLElement const isTrigger getItems().some(i i.ref.contains(target)) const isRootViewport menuContext.isRootMenu menuContext.viewport.value?.contains(target) if (isTrigger || isRootViewport || !menuContext.isRootMenu) ev.preventDefault() } }这段逻辑说明点击其他 Trigger、点击根级 Viewport 内部、或在子菜单非 root场景下发生的外部指针事件都不会触发关闭——这正是“在下拉面板内切换菜单项时不闪断”的关键。焦点侧同理NavigationMenuContentImpl.vue焦点落在data-navigation-menu-trigger上会阻止关闭焦点仍停留在根导航菜单 DOM 内部时也只更新状态、不关闭内容。Escape 关闭的处理则同时完成三件事关闭菜单、把焦点还给对应 Trigger、记录wasEscapeCloseRef供 Trigger 侧的 hover 逻辑判断避免关闭后立刻又被 hover 打开见 NavigationMenuContentImpl.vuefunction handleEscapeKeyDown(ev: KeyboardEvent) { emits(escapeKeyDown, ev) if (!ev.defaultPrevented) { menuContext.onItemDismiss() itemContext.triggerRef?.value?.focus() itemContext.wasEscapeCloseRef.value true } }数据属性Data Attributes组件会渲染以下数据属性可用于 CSS 选择器驱动样式与动画引自 官方组件文档 的 Content 小节属性取值[data-state]open|closed[data-motion]to-start|to-end|from-start|from-end[data-orientation]vertical|horizontaldata-state由工具函数生成getOpenState(open)直接返回open或closed见 utils.ts。data-motion 的推导原理data-motion是高级动画的核心钩子。它由一个 computed 根据“当前激活项索引”与“上一个激活项索引”的关系推导见 NavigationMenuContentImpl.vueconst motionAttribute computed(() { const values getItems().map(i i.ref.id.split(trigger-)[1]) if (menuContext.dir.value rtl) values.reverse() const index values.indexOf(menuContext.modelValue.value) const prevIndex values.indexOf(menuContext.previousValue.value) // ... const attribute (() { // Dont provide a direction on the initial open if (index ! prevIndex) { // 从另一项进入本项 if (isSelected prevIndex ! -1) return index prevIndex ? from-end : from-start // 从本项离开去另一项 if (wasSelected index ! -1) return index prevIndex ? to-start : to-end } return null })() prevMotionAttributeRef.value attribute return attribute })语义归纳从左侧索引更小的项切换到本项时本项标记from-end进入方向来自末端反向切换为from-start当前激活项被关闭、用户切往右侧项时该项标记to-end退出方向朝向末端左侧则to-start首次打开无prevIndex与直接关闭离开列表时不设置方向即保持上一次的值或直接为空——源码注释明确说明“只为 selected 和 last selected 内容更新方向避免该范围之外的动画被打断”dirrtl时索引数组会反转保证右到左布局下方向语义依然正确。配套地Root组件还通过--reka-navigation-menu-viewport-width/heightCSS 变量暴露视口尺寸由激活内容计算得出二者结合即可实现官方文档给出的“高级动画”方案/* 引自 docs/content/docs/components/navigation-menu.md */ .NavigationMenuContent { position: absolute; top: 0; left: 0; animation-duration: 250ms; animation-timing-function: ease; } .NavigationMenuContent[data-motionfrom-start] { animation-name: enterFromLeft; } .NavigationMenuContent[data-motionfrom-end] { animation-name: enterFromRight; } .NavigationMenuContent[data-motionto-start] { animation-name: exitToLeft; } .NavigationMenuContent[data-motionto-end] { animation-name: exitToRight; } .NavigationMenuViewport { position: relative; width: var(--reka-navigation-menu-viewport-width); height: var(--reka-navigation-menu-viewport-height); transition: width, height, 250ms ease; } keyframes enterFromRight { from { opacity: 0; transform: translateX(200px); } to { opacity: 1; transform: translateX(0); } } /* enterFromLeft / exitToRight / exitToLeft 同理方向取反 */template NavigationMenuRoot NavigationMenuList NavigationMenuItem NavigationMenuTriggerItem one/NavigationMenuTrigger NavigationMenuContent classNavigationMenuContent Item one content /NavigationMenuContent /NavigationMenuItem NavigationMenuItem NavigationMenuTriggerItem two/NavigationMenuTrigger NavigationMenuContent classNavigationMenuContent Item two content /NavigationMenuContent /NavigationMenuItem /NavigationMenuList NavigationMenuViewport classNavigationMenuViewport / /NavigationMenuRoot /templateTeleport 与 Viewport内容渲染在哪里外壳组件的模板揭示了渲染位置策略见 NavigationMenuContent.vueTeleport :toisClient menuContext.viewport.value ? menuContext.viewport.value : body :disabledisClient menuContext.viewport.value ? !menuContext.viewport.value : true 提供NavigationMenuViewport时所有激活的内容会被Teleport 到视口元素内从而支持“列表与内容分离”的灵活布局对应官方文档 Flexible layouts 示例内容统一渲染在根级NavigationMenuViewport处Tab 焦点由组件自动维持未提供视口时内容渲染回退到body配合 CSS 绝对定位。此外还有一处对交互的细粒度控制根级菜单下未激活的内容会被置为pointer-events: none:style{ pointerEvents: !open menuContext.isRootMenu ? none : undefined }保证关闭状态下的残留 DOM 不会拦截鼠标事件。悬停进出事件也挂在外壳上pointerentermenuContext.onContentEnter(...)用于“指针进入内容区即取消关闭计时”pointerleave则通过 whenMouse 限定只对pointerType mouse生效触屏/触控笔不触发延迟关闭逻辑。可访问性与键盘交互NavigationMenuContentImpl在渲染时通过:aria-labelledbytriggerId把内容与其 Trigger 建立可访问名称关联triggerId由 makeTriggerId 生成为${baseId}-trigger-${value}形式这是 ARIA 层面“内容归属于哪个触发按钮”的直接证据。键盘行为集中在 NavigationMenuContentImpl.vue 的 handleKeydownTab / ShiftTab通过 getTabbableCandidates基于TreeWalker跳过disabled、hidden、input[typehidden]且以运行时tabIndex 0为准收集可聚焦候选按视觉顺序前进/后退到达边界时聚焦 item 的 focus proxy交给浏览器处理跨出菜单的 Tab 行为从而保持文档承诺的“managed tab focus”方向键委托useArrowNavigation在候选间移动焦点loop: false并在目标不是当前根菜单时直接返回防止父级菜单误触发Escape关闭内容并回焦 Trigger见上节关闭广播非 root 内容关闭时通过EVENT_ROOT_CONTENT_DISMISS自定义气泡事件navigationMenu.rootContentDismiss向上传播由根级Root统一处理关闭与回焦——子菜单内容的 dismiss 因此能冒泡到整棵菜单树。unmountOnHide 与卸载语义Root的unmountOnHide默认true决定了Presence的force-mount取值:force-mount!menuContext.unmountOnHide.value。也就是说默认行为内容关闭后从 DOM 中卸载设置unmountOnHidefalse后内容保留在 DOM中通过hidden属性控制可见性——适合需要保留内部状态如表单输入或让 CSS 动画接管显隐的场景仓库中 NavigationMenuUnmountOnHideFalse.vue 即为该模式的测试夹具。相关行为在 NavigationMenu.test.ts 中有覆盖例如pointerleavepointerType: mouse后根级内容节点被移除expect(findContent().exists()).toBe(false)以及“内容二的 dismiss 处理提前返回、内容一保持打开”的多内容共存断言等。典型用法速查基础用法内容直接挂在 Item 内无 Viewportscript setup langts import { NavigationMenuContent, NavigationMenuItem, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, } from reka-ui /script template NavigationMenuRoot NavigationMenuList NavigationMenuItem NavigationMenuTriggerItem one/NavigationMenuTrigger NavigationMenuContentItem one content/NavigationMenuContent /NavigationMenuItem NavigationMenuItem NavigationMenuTriggerItem two/NavigationMenuTrigger NavigationMenuContentItem two content/NavigationMenuContent /NavigationMenuItem /NavigationMenuList /NavigationMenuRoot /template垂直菜单通过 Root 的orientationvertical切换data-orientation属性会同步变化。受控关闭事件可阻止的典型应用NavigationMenuContent escape-key-downonEscape interact-outside(e) !confirm(离开菜单?) e.preventDefault() 动画控制forceMount 自行监听data-state切换hidden/class即可把进入/退出动画完全交给 Vue 动画库。相关文件索引文件作用docs/content/meta/NavigationMenuContent.md本文档Content 部件的 Props/Events 自动生成元数据packages/core/src/NavigationMenu/NavigationMenuContent.vue外壳forceMount、Presence、Teleport、pointer 进出packages/core/src/NavigationMenu/NavigationMenuContentImpl.vue实现DismissableLayer、data-motion、键盘与关闭逻辑packages/core/src/NavigationMenu/utils.tsgetOpenState、getTabbableCandidates、whenMouse等工具packages/core/src/NavigationMenu/NavigationMenuRoot.vue菜单上下文modelValue、unmountOnHide、viewport、延迟开关packages/core/src/DismissableLayer/DismissableLayer.vue外部交互事件的来源disableOutsidePointerEvents等packages/core/src/NavigationMenu/NavigationMenu.test.ts关闭/悬停/多内容并存的测试断言docs/content/docs/components/navigation-menu.md组件完整文档Anatomy、数据属性、示例与可访问性【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
