如何在Vue.js中禁用radix-vue的NavigationMenuTrigger悬停触发与外部关闭？

你的代码存在两个核心问题，导致配置未生效：

1. 属性被覆盖：你将自定义的disableHoverTrigger和disableOutsidePointerEvents写在了v-bind="forwardedProps"前面，Vue中后声明的属性会覆盖前面的。如果forwardedProps包含同名属性（哪怕是默认值），你的自定义设置就会失效。需要把v-bind放在前面，再写自定义属性。

2. 属性名与配置位置错误：disableOutsidePointerEvents并不是NavigationMenuTrigger的有效属性，而且禁用外部点击/悬停关闭的配置需要在父组件NavigationMenu上设置，而非Trigger组件。

正确实现代码 #

第一步：修改Trigger组件，禁用悬停触发打开

<template>
  <NavigationMenuTrigger
    v-bind="forwardedProps"
    :disableHoverTrigger="true"
    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
  >
    <slot />
    <ChevronDown
      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuTrigger>
</template>

第二步：在父组件NavigationMenu上禁用外部关闭行为

<NavigationMenu :closeOnOutsideClick="false" :closeOnPointerLeave="false">
  <!-- 此处放置你的NavigationMenuTrigger、NavigationMenuContent等组件 -->
</NavigationMenu>

额外可选配置 #

如果需要禁用ESC键关闭菜单，可给NavigationMenu追加属性：

<NavigationMenu :closeOnOutsideClick="false" :closeOnPointerLeave="false" :closeOnEscape="false">
  <!-- 菜单内容 -->
</NavigationMenu>

内容的提问来源于stack exchange，提问作者Abdel-Rahman