点击遮罩层关闭弹窗的核心是事件捕获与元素包含判断：遮罩层绑定@click关闭，内容区用@click.stop阻止冒泡；统一用v-model+@close处理ESC、遮罩点击、关闭按钮；弹出时锁定body滚动；可封装v-click-outside指令复用。
遮罩层点击关闭弹窗，核心是区分「点击发生在遮罩层上」还是「点击在弹窗内容区内部」。Vue 中不依赖第三方库也能干净实现，关键在于事件捕获 + 元素包含判断。
监听遮罩层点击并关闭弹窗
最直接的方式是给遮罩层（通常是外层 div）绑定 @click，并确保内容区域阻止冒泡：
- 遮罩层和弹窗内容用同一级结构，遮罩层作为背景容器，内容区是子元素
- 遮罩层的 click 事件触发关闭逻辑
- 内容区域添加 @click.stop，防止点击穿透到遮罩层
示例结构：
<div class="mask" v-if="visible" @click="closeModal"><div class="modal-content" @click.stop>
<!-- 表单、按钮等 -->
<button @click="closeModal">X</button>
</div>
</div>
兼容 ESC 键和遮罩层点击的一体化方案
用户习惯是：点遮罩、按 ESC、点右上角 × 都应关闭。推荐统一用 v-model + @close 组合：
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- v-model 绑定显示状态（如 dialogVisible），双向控制显隐
- @close 监听所有关闭触发源（包括遮罩点击、ESC、关闭按钮）
- 在 handleDialogClose 中执行清理逻辑（如重置表单、释放焦点）
这样既语义清晰，又避免重复判断来源。
防滚动穿透：弹出时锁定 body 滚动
遮罩层出现后，若页面仍可滚动，体验会割裂。常用做法是在 visible 变为 true 时冻结 body：
- 记录当前 scrollTop 值
- 设置 document.body.style.position = 'fixed'，并用 top 负值抵消滚动位置
- 关闭时还原 position、scrollTop 和其他样式
注意：移动端建议优先用 overflow: hidden 替代 fixed 定位，兼容性更稳。
进阶：用自定义指令封装「点击外部关闭」
适合多个弹窗复用。写一个 v-click-outside 指令：
- mounted 时，在 document 上添加捕获阶段 click 监听
- 回调中用
!el.contains(event.target)判断是否点在外 - 满足条件则执行传入的关闭函数（如 () => visible = false）
- unmounted 时自动移除监听，避免内存泄漏
指令绑定到弹窗根元素即可，无需每个组件手动加逻辑。
