Notification 通知

四角弹出的通知提醒，比 Message 更适合带标题 + 描述的多行内容。默认 4.5 秒自动关闭，右上角弹出。

基本使用

notification.success / info / warning / error 都接受 { title, description } 形式的对象。

不同类型

不同 type 对应不同前置图标和强调色。

弹出位置

支持 6 个位置：topRight / topLeft / top（顶部居中）/ bottomRight / bottomLeft / bottom（底部居中）。

自定义停留时长

duration 推荐传秒；传 0 则不自动关闭，需要用户手动点 ×。

单位规则

• duration ≤ 100 视为「秒」（如 4.5 → 4.5 秒）
• duration > 100 视为「毫秒」（如 4500）
• duration === 0 永远表示不自动关闭

全局配置 notification.config

notification.config(...) 设置 maxCount / stack / pauseOnHover / role / duration / top / bottom / placement / getContainer 等全局默认值。再次调用以覆盖前一次配置。

主动关闭 + 关闭回调

open / 各类型方法都返回 NotificationHandle，调用 handle.close() 可主动收掉；onClose 在关闭时（自动 / 主动 / destroy）触发。

全局清空

notification.destroy() 会关闭四个角的全部通知，并卸载容器；下次再调用会重新挂载。

useNotification composable

useNotification() 返回 { notification, holder } 对象（不是 React 风格元组）。容器渲染在当前 Vue 子树里，自动继承父组件 provide 的 ConfigProvider / 主题等上下文——与模块级 notification 的最大差异。

何时用模块级 vs Hook 版？

• 模块级 import { notification } from '@vaebe/ccui'：脚手架 / utils / 命令式弹一条，简单直接，但容器走独立 createApp，拿不到调用方 app 的 inject（自定义 ConfigProvider、主题、locale）。
• Hook useNotification()：当通知需要继承组件树上下文时用。必须在模板中挂 <component :is="holder" />。

UseNotificationReturn

字段	类型	说明
notification	NotificationApi	与全局 notification 同 API：info/success/warning/error/open/config/destroy
holder	Component	必须挂到模板：<component :is="holder" />

API

notification 命名空间

方法	说明
notification.open(options)	通用入口，传 NotificationOptions，返回 NotificationHandle
notification.info(options)	info 类型
notification.success(...)	success 类型
notification.warning(...)	warning 类型
notification.error(...)	error 类型
notification.config(cfg)	全局默认值配置
notification.destroy()	关闭并卸载所有通知容器

NotificationOptions

字段	类型	默认	说明
title	string	—	通知标题（建议必填）
description	string | VNode	—	通知正文
type	NotificationType	'info'	类型：info / success / warning / error
placement	NotificationPlacement	'topRight'	6 位置：top / topRight / topLeft / bottom / bottomRight / bottomLeft
duration	number	4.5	停留时长。≤100 按秒，>100 按毫秒；0 不自动关闭
showClose	boolean	true	是否显示关闭按钮
icon	string	''	自定义 icon 名（覆盖默认类型图标）
customClass	string	''	自定义类名
onClose	() => void	—	关闭时回调
role	'alert' | 'status'	'alert'	DOM role + aria-live（alert → assertive；status → polite）
pauseOnHover	boolean	true	鼠标悬停暂停自动关闭计时器

NotificationGlobalConfig

通过 notification.config({...}) 设置；优先级低于单次 open() 选项。

字段	类型	默认	说明
duration	number	4.5	默认停留时长（秒）
maxCount	number	Infinity	单 placement 最多并发条数，超出顶掉最旧
stack	boolean	false	视觉堆叠模式（容器加 --stack modifier）
pauseOnHover	boolean	true	全局默认 pauseOnHover
role	'alert' | 'status'	'alert'	全局默认 role
placement	NotificationPlacement	'topRight'	全局默认弹出位置
top	number | string	—	顶部偏移（仅作用于 top* placement）
bottom	number | string	—	底部偏移（仅作用于 bottom* placement）
getContainer	() => HTMLElement	body	自定义挂载父节点

NotificationHandle

字段	类型	说明
close	() => void	主动关闭该通知