Backdrop 遮罩
全屏半透明遮罩，支持内容插槽、颜色/浓度/模糊定制、淡入淡出动画与生命周期事件；open=false 时播完退场动画后自动卸载节点，不留孤儿 DOM。
基础用法
基础用法
点击遮罩任意位置关闭（监听 oas-click）。
内容插槽（全屏 loading）
内容插槽（全屏 loading）
默认插槽承载遮罩上层内容（spinner / 文案 / 引导等，居中展示）；点击内容区不会触发 oas-click，只有点击遮罩本体才关闭。
颜色与浓度
颜色与浓度
color 接受任意 CSS 色值或 11 个预设名；opacity 支持 thin（0.35）/ default（0.55）/ thick（0.75）三档或 0-1 数字。亦可通过 --oas-backdrop-bg / --oas-backdrop-opacity 变量做主题级覆盖。
模糊全值化
模糊全值化
blur 布尔（空值）回落 blur(4px)（兼容既有用法）；传字符串则接受任意 CSS backdrop-filter 全值。
淡入淡出与生命周期事件
淡入淡出与生命周期事件
打开/关闭播放 opacity 淡入淡出（动画只走 transform/opacity），过渡结束派发 oas-after-show / oas-after-close；prefers-reduced-motion 下跳过过渡。
不可关闭遮罩（persistent）
不可关闭遮罩（persistent）
persistent 拦截遮罩点击关闭（不再派发 oas-click），点击遮罩时内容抖动提示不可关闭；关闭由内容区按钮或宿主决定。键盘 Tab 聚焦遮罩顶部的「关闭遮罩」按钮同样可关闭（读屏/键盘关闭通道，文案经 close-label 定制）。
点击传播控制
点击传播控制
stop-propagation 默认阻断遮罩点击传播到宿主文档（遮罩本职即拦截背后交互）；设为 false 后点击遮罩也会继续触发页面级点击监听。
透明与模糊
透明与模糊
不锁定滚动
不锁定滚动
lock-scroll 默认 true，设为 false 后 body 可继续滚动。
API
oas-backdrop
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
blur | 背景模糊 | — | — |
close-label | 读屏关闭通道按钮的 aria-label（sr-only 按钮，Tab 聚焦时可见，键盘可关遮罩）；缺省走 locale modal.close | — | — |
color | 遮罩底色：任意 CSS 色值，或 11 预设名（magenta/red/volcano/orange/gold/lime/green/cyan/blue/geekblue/purple，映射 --oas-preset-* token）；未设置回落 --oas-backdrop-bg | — | — |
lock-scroll | 打开时锁定 body 滚动 | string | true |
opacity | 遮罩浓度：档位 thin(0.35) / default(0.55) / thick(0.75) 或 0–1 数字；只作用于底色层（不压暗遮罩内容）；非法值回落 --oas-backdrop-opacity | — | — |
open | 是否显示 | boolean | — |
persistent | 持久遮罩：点击遮罩不派发 oas-click（宿主事件驱动关闭失效），改为内容 shake 反馈提示不可关闭 | boolean | — |
stop-propagation | 点击遮罩阻断事件穿透到宿主文档（默认 true；"false" 允许冒泡） | string | true |
transparent | 遮罩透明（无底色） | — | — |
事件
| 事件 | 说明 |
|---|---|
oas-after-close | 关闭动画完成后派发（规范渠道，与 after-* 族一致）；detail 无；滚动解锁在此之前已完成，节点卸载（元素自移除）在此之后 |
oas-after-show | 进入动画完成后派发（规范名，对齐 after-* 家族），detail 无；reduced-motion 下立即派发 |
oas-click | 点击遮罩，detail.originalEvent 为原始点击事件 |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 遮罩内容 |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-backdrop-bg | var(--oas-color-overlay) |
--oas-backdrop-blur | none |
--oas-backdrop-opacity | 1 |
- 自身无焦点陷阱（由上层弹窗负责）；Esc 不自动关闭（由外层弹窗决定）。
open=false时播完退场动画后从 DOM 卸载，无孤儿 DOM；多遮罩共存时仅最后一个关闭才恢复滚动。- 点击判定：仅点击遮罩本体（内容区点击不触发
oas-click）；stop-propagation默认阻断遮罩点击传播到宿主文档。