在 vuetify 2 中,`` 默认不响应内部嵌套组件(如自定义 dialog)的点击事件来关闭菜单;需手动绑定 `v-model` 并在目标元素上显式设置 `@click="showmenu = false"` 实现精准关闭。
Vuetify 2 的 组件提供了 close-on-click 属性,但该属性仅对菜单直接子元素生效,且当内部嵌套了自定义组件(如 )时,事件冒泡或委托可能被拦截,导致点击菜单项无法自动关闭。
最可靠、推荐的解决方案是:使用 v-model 显式控制菜单的打开/关闭状态,并在需要关闭的菜单项上添加 @click="showMenu = false"。
✅ 正确实现方式(代码示例)
transition="slide-y-transition"
bottom
left
offset-y
nudge-bottom="2"
:close-on-click="!activeTour"
>
mdi-plus-circle
>
{{ $t("add_entry") }}
⚠️ 注意事项
-
@click.stop 很重要:在 v-list-item-title 的 @click 上添加 .stop 修饰符,防止点击穿透到外层 v-list-item 导致 showMenu = false 被执行两次(尤其当 Dialog 内部也触发点击时);
-
避免滥用 close-on-click:当菜单内含复杂交互组件时,建议关闭 :close-on-click(设为 false),完全交由 v-model 控制,提升可预测性;
-
v-model 是关键:v-menu 的 v-model 绑定的是布尔值,代表菜单是否处于展开状态,这是 Vuetify 2 推荐的受控模式;
- 若需在 Dialog 关闭后恢复菜单打开状态(如取消操作),可在 Dialog 的回调中重置 showMenu = true,实现更精细的状态流管理。
通过显式状态管理 + 精准事件绑定,即可彻底解决嵌套组件内点击不关闭菜单的问题,代码清晰、行为可预期,符合 Vue 响应式开发最佳实践。