在 vuetify 2 中，`
Vuetify 2 的
最可靠、推荐的解决方案是：使用 v-model 显式控制菜单的打开/关闭状态，并在需要关闭的菜单项上添加 @click="showMenu = false"。
柏顿企业网站管理系统 1.0
下载
柏顿企业网站管理系统（免费版）秉承了东莞柏顿软件的一惯原则（致力于打造简洁、实用、绿色的管理系统）而推出的一款适合广大中小型企业的网站管理系统。主要功能如下：1.基本设置：联系方式、关键字、版权信息等等；2.菜单管理：用户可以在线增加、删除、修改和隐藏前台的菜单栏目和菜单项3.新闻系统：支持二级分类，可分类查看新闻、修改新闻、批量推荐、删除新闻，可设置是否推荐、新闻点击等4.产品系统: 产品类别新
✅ 正确实现方式（代码示例）
<template>
<v-menu
v-model="showMenu" <!-- 关键：双向绑定菜单可见状态 -->
transition="slide-y-transition"
bottom
left
offset-y
nudge-bottom="2"
:close-on-click="!activeTour"
>
<template #activator="{ on, attrs }">
<v-btn
icon
class="ml-md-4"
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-plus-circle</v-icon>
</v-btn>
</template>
<v-list>
<!-- 在 v-list-item 上直接绑定点击关闭逻辑 -->
<v-list-item @click="showMenu = false">
<WorkRegistryDialog class="work-registry-activator">
<template #activator="{ on: dialog, attrs }">
<v-list-item-title
v-bind="attrs"
v-on="dialog"
@click.stop="zamknij" <!-- 阻止事件冒泡，避免重复触发 -->
>
{{ $t("add_entry") }}
</v-list-item-title>
</template>
</WorkRegistryDialog>
</v-list-item>
</v-list>
</v-menu>
</template>
<script>
export default {
data() {
return {
showMenu: false, // 控制菜单显隐的核心响应式数据
activeTour: false // 示例业务状态
}
},
methods: {
zamknij() {
// 自定义逻辑，例如打开对话框后可选关闭菜单
console.log('Entry dialog opened');
// 注意：此处无需手动设 showMenu = false，已在 v-list-item@click 中处理
}
}
}
</script>⚠️ 注意事项
- @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 响应式开发最佳实践。
