Notification 通知
四角定位的通知卡片，支持标题、描述、时长、类型、悬停暂停、优先级抢占与栈治理（折叠计数/层叠悬停展开）。
基础用法
四种类型
自定义时长
自定义时长
带进度条
带进度条
长内容可滚动
长内容可滚动
位置四角
位置四角
数量上限
数量上限（超限丢最老）
悬停暂停
悬停暂停（默认开启）
关闭回调
关闭回调 onClose
无论自动关闭、点击 ✕ 还是命令式销毁，onClose 都会触发一次：
点击回调
点击回调 onClick（查看详情场景）
关闭开关
关闭开关 closable
图标插槽
图标插槽 slot="icon" / slot="close-icon"
内容更新（key）
内容更新 key / update
进度条颜色
进度条颜色 --oas-notification-progress-color
通知挂载到下方容器（container），容器上的颜色变量穿透生效——观察右上角进度条为危险色：
偏移
偏移 offset
挂载容器
挂载容器 container
通知栈挂到下方容器内（DOM 归属指定元素，视觉仍为视口四角定位）；打开 devtools 可见栈容器在 div#notif-mount-host 内：
挂载目标容器（notif-mount-host）
footer 操作区
footer 操作区（查看详情 / 撤销）
优先级
优先级 priority（高优抢占）
先连发普通通知（max=5），再发高优：高优恒占最新侧，超限时低优先被挤出：
栈治理
栈治理 stackMode（折叠计数 / 层叠悬停）
loading 与 promise
loading 态与 promise 链
富内容与尺寸
富内容 content 与尺寸 size
清空全部
清空全部
API
oas-notification
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
closable | 是否显示关闭按钮（默认 true；false 隐藏关闭钮） | string | true |
description | 描述内容 | string | — |
duration | 自动关闭时长（ms），0 表示不自动关闭 | string | 4500 |
pause-on-hover | 悬停暂停计时与进度条（默认开，mouseenter/leave 通道）；移出恢复剩余时长 | string | true |
progress-position | 进度条位置：bottom（默认）/ top | string | bottom |
scrollable | 描述内容超长时卡片内滚动，默认开启；传 false 关闭 | string | true |
show-progress | 显示自动关闭倒计时进度条（动画时长与 duration 同步） | boolean | — |
size | 尺寸档（配套 --oas-notification-width 变量） | — | — |
title | 标题文案（渲染进可见标题区；读取后即从宿主移除，不残留原生悬浮提示；清空传空串）；富内容用 slot="title" | string | — |
type | 通知类型：info/success/warning/error | string | info |
事件
| 事件 | 说明 |
|---|---|
oas-click | 通知体点击时派发（「点击查看详情」场景） |
oas-close | 通知关闭时派发，detail { source }：auto（时长到期）/ button（点击关闭钮）/ destroy（编程式销毁）/ evict（超上限被挤出） |
插槽
| 名称 | 说明 |
|---|---|
close-icon | 自定义关闭图标，覆盖默认 ✕ |
content | 正文富内容插槽 |
footer | 底部操作区插槽（操作按钮/辅助行） |
icon | 图标插槽，覆盖 type 默认图标 |
title | 标题富内容插槽，有内容时覆盖 title 属性文案 |
CSS 变量
| CSS 变量 | 说明 | 默认值 |
|---|---|---|
--oas-glass-blur | — | none |
--oas-glass-refraction | 液态玻璃边缘折射滤镜（data-glass 生效，默认 none）；局部停用覆盖为空值（--oas-glass-refraction: ;）——不得用 none（与 button 态的 brightness() 混排会使整条 filter 声明非法） | none |
--oas-glass-ring | — | transparent |
--oas-notification-progress-color | 倒计时进度条颜色 | var(--oas-color-primary) |
--oas-notification-width | 卡片宽度（尺寸档位内部引用） | 320px |
方法
| 方法 | 说明 |
|---|---|
notification.info({ title, description?, content?, duration?, showProgress?, progressPosition?, scrollable?, position?, max?, offset?, container?, priority?, stackMode?, stackThreshold?, key?, onClose?, onClick?, closable?, pauseOnHover?, size?, icon?, closeIcon?, footer? }) | 信息通知，返回 { close } |
notification.success(...) / notification.warning(...) / notification.error(...) | 成功/警告/错误通知，options 同上 |
notification.loading(...) | loading 态：spinner 图标、不自动关、不可手动关 |
notification.promise(p, { loading, success, error }) | promise 链：loading → 成功切 success（4500ms 自动关）/ 失败切 error |
notification.update(key, { title?, description?, content?, duration?, type? }) | 更新已存在通知（key 定位）；key 不存在则新建 |
notification.destroy(key) | 关闭指定 key 的通知；不存在静默无操作 |
destroyAllNotification() | 清空全部通知（不触发 onClose） |
position四角：top-right（默认）/top-left/bottom-right/bottom-left，每角独立栈容器。max同栈数量上限（默认0不限），超限丢最老——优先丢最老的 normal，全 high 才丢最老 high；被挤出同样触发onClose（source: 'evict'）。offset栈距视口边偏移（默认16），作用于当前 position 方向；container覆盖挂载目标（默认最近 app 宿主或 body）。priority：high恒占最新侧（后续 normal 插到其前），抢占语义由插入排序 + max 挤出策略共同实现。stackMode栈治理：collapsible（超过stackThreshold默认3折叠旧通知，"+N" 徽章点击展开/收起）/peek（非最新卡收起为边缘条，hover 栈展开）。onClose关闭统一触发一次；onClick通知体点击回调；closable默认true；pauseOnHover默认开启（悬停暂停计时与进度条）。title/icon/closeIcon/footer/content支持 Node 富内容通道；footer也接受 Node 数组。- 命令式创建的通知挂最近
oas-app宿主（无则 body），role="region"+aria-label，右上角堆叠。