
在 vuetify 2 中,当菜单内嵌套自定义组件(如对话框封装器)时,`close-on-click` 可能失效;通过绑定 `v-model` 控制菜单显隐,并在目标列表项添加 `@click="showmenu = false"` 即可可靠关闭。
Vuetify 2 的
解决方法是放弃完全依赖 close-on-click,改用显式状态控制:为
以下是优化后的代码结构:
transition="slide-y-transition" bottom left offset-y nudge-bottom="2" :close-on-click="!activeTour" > mdi-plus-circle > {{ $t("add_entry") }}
✅ 关键要点说明:
- v-model="showMenu" 让菜单状态完全受控,避免 close-on-click 的不可靠性;
- @click="showMenu = false" 直接作用于
,确保点击即关闭; - 对内部 @click 添加 .stop 修饰符(如 @click.stop="zamknij"),防止事件冒泡导致重复触发或干扰菜单关闭;
- 若需在关闭菜单的同时打开对话框,建议将 zamknij 逻辑与 showMenu = false 合并调用,或使用 $nextTick 确保菜单 DOM 已移除后再操作子组件。
此方案兼容 Vuetify 2.x 全版本,不依赖外部监听器,简洁、健壮且易于维护。










