应使用 ref 结合 defineexpose 暴露 show/hide 方法控制遮罩层显隐，而非仅靠 props 或 v-model；子组件需用 ref 管理 visible 状态并显式暴露方法，父组件通过 ref 调用，同时注意定位与层级样式设置。
用 ref 控制加载中遮罩层的显隐，核心是让父组件能调用子组件里控制显示/隐藏的方法，而不是直接操作子组件的响应式变量。Vue 3 的 setup 语法下，必须通过 defineExpose 显式暴露方法，ref 才能拿到并调用。
子组件需暴露切换方法
遮罩层组件（如 LoadingMask.vue）内部用 ref 管理 visible 状态，但不能只靠 props 传递布尔值来被动控制——那样父组件无法主动触发显示逻辑（比如请求开始时立刻 show）。正确做法是定义一个可调用的方法，并用 defineExpose 暴露出去：
- 在子组件 script setup 中声明 const visible = ref(false)
- 写一个 show() 和 hide() 方法，或合并为 toggle(show: boolean)
- 必须调用 defineExpose({ show, hide })，否则父组件的 ref.value 拿不到这些函数
父组件用 ref 获取并调用
父组件模板中给子组件加 ref 属性，setup 里用 ref() 初始化同名变量，之后就能调用暴露的方法：
- setup 中：const maskRef = ref()
- 发起请求前执行：maskRef.value?.show()；请求结束后执行：maskRef.value?.hide()
- 加可选链 ?. 防止组件未挂载时报错
注意定位与层级问题
遮罩层要完整覆盖目标区域，样式上必须满足：
- 父容器（比如按钮所在 div）需设 position: relative 或 absolute，否则 position: absolute 的遮罩会相对于 body 定位，可能偏移
- 遮罩自身设 position: absolute、top: 0、left: 0、width: 100%、height: 100%
- z-index 至少设为 999，避免被其他元素遮挡
不推荐只靠 v-model 或 props 控制
虽然可以用 :visible.sync 或 v-model:visible 实现双向绑定，但这种方式把控制权交给了父组件的数据流，缺乏灵活性。例如：请求中途想手动关闭遮罩、或根据接口返回码决定是否继续显示——这些都需要子组件有自主方法。ref + defineExpose 是更可控、更符合组合式 API 设计意图的方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
