vue 3 中点击空白处关闭下拉菜单需：1. onmounted 添加 document 点击监听；2. 用 ref 判断点击是否在菜单内，否则关闭；3. 菜单项和按钮加 @click.stop 阻止冒泡；4. onunmounted 移除监听；5. 多菜单时统一 reactive 状态管理并互斥开关。
在 Vue 3 中实现点击页面空白处关闭下拉菜单，核心是：监听全局 document 点击事件 + 判断点击目标是否在菜单区域内 + 合理清理事件防止内存泄漏。不推荐用 window.onclick 覆盖式赋值，也不建议用透明遮罩干扰交互，推荐使用事件监听器配合 ref 和 stopPropagation 控制。
绑定 document 点击事件（mounted 中添加）
在组件的 onMounted 钩子中为 document 添加 click 监听器，回调里检查点击目标是否落在当前下拉区域之外：
- 用 template ref 获取下拉容器 DOM 元素（例如
<div ref="dropdownRef">） <li>在监听函数中调用 <code>dropdownRef.value?.contains(e.target)判断是否点中内部 - 如果不包含且菜单处于打开状态，则设
showDropdown = false <button>展开</button><div ref="dropdownRef">...选项列表...</div>- 保存监听函数引用（不能用箭头函数匿名写法），例如：
const handleClick = (e) => { ... } onMounted(() => document.addEventListener('click', handleClick))onUnmounted(() => document.removeEventListener('click', handleClick))- 用一个 reactive 对象集中控制各菜单显隐，例如：
const dropdowns = reactive({ search: false, user: false, filter: false }) - 监听函数中遍历 keys，对所有非当前菜单的项设为 false
- 触发菜单时先清空其他，再切换自身，保证“一次只开一个”
阻止菜单内点击冒泡（关键细节）
下拉菜单的触发按钮和内容区域必须加 @click.stop，否则点击菜单项或按钮时事件会冒泡到 document，导致刚点开就立刻关闭：
卸载时移除监听（unmounted 中清理）
Vue 3 的 onUnmounted 钩子中必须手动移除事件监听器，避免重复绑定或跨组件影响：
多个下拉菜单共存时的互斥处理
如果页面有多个独立下拉菜单（如搜索框、用户头像、筛选栏），可统一管理开关状态：
