LoadingOverlay 加载遮罩

<script>
import { ref } from 'vue'
const loading = ref(false)
</script>

用法

容器内

遮罩盖在默认插槽上，底层内容保持可见。

全屏

fullscreen 把遮罩 teleport 到 body 并覆盖视口，不渲染默认插槽。

后台任务

局部遮罩与 Toast、Tooltip、Spinner 组合；刷新期间任务队列保持可见，布局不跳动。

最佳实践

• 刷新、保存、重算等已有内容的短等待用局部遮罩，让旧内容保持可见。
• fullscreen 只用于必须阻断全局操作的流程，如启动、切换工作区或不能并行的危险操作。
• 文案写具体动作：「正在刷新任务队列…」比「Loading…」更有用。
• 首屏内容尚不存在时用 TxLoadingState 或骨架屏，不要套遮罩。

API 参考

属性

插槽

概述

• 局部模式把默认插槽包在 position: relative 容器中，只在 loading 时渲染绝对定位的遮罩。
• 全屏模式每次打开都获取新的共享 z-index。
• 遮罩带 role="status" 与 aria-live="polite"，读屏器会播报 text，无需另行播报。
• 全屏模式把焦点停在遮罩上并拦截 Tab，关闭后焦点回到原来的元素。
• 遮罩没有模态语义（无 aria-modal）；需要模态时用 TxModal 或 Dialog 组件。

技术实现

• 遮罩通过 backdrop-filter 叠加模糊与饱和度。
• 源码：packages/tuffex/packages/components/src/loading-overlay/。