Notification 通知

悬浮在页面角落的通知提醒信息。

基础用法

基础的通知用法。

不同类型的通知

我们提供了四种类型的通知：success, warning, info, error。

自定义位置

通知组件可以出现在角落的四个位置。

✨ 进度条 (Unique)

Fyoimiya UI 的 Notification 组件支持可视化进度条，让用户直观地看到剩余时间。鼠标悬停时，进度条会暂停。

🔮 毛玻璃效果 (Unique)

配合页面背景，毛玻璃效果能提供更现代的视觉体验。

💬 聊天模式 (Unique)

让通知看起来像是来自某个人的消息。非常适合社交类应用。

🎮 交互按钮 (Unique)

你可以在通知中直接添加操作按钮，处理用户的快速反馈。

API

Notification 配置项

属性名	说明	类型	默认值
title	标题	string	—
message	说明文字	string / VNode	—
type	主题样式，如果为 chat 则启用聊天模式	'success' | 'warning' | 'info' | 'error' | 'chat'	—
icon	自定义图标	string / Component	—
dangerouslyUseHTMLString	是否将 message 属性作为 HTML 片段处理	boolean	false
customClass	自定义类名	string	—
duration	显示时间, 毫秒。设为 0 则不会自动关闭	number	4500
position	自定义弹出位置	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'
showClose	是否显示关闭按钮	boolean	true
onClose	关闭时的回调函数	function	—
onClick	点击 Notification 时的回调函数	function	—
offset	偏移的距离	number	16
glass	是否开启毛玻璃效果	boolean	false
showProgress	是否显示倒计时进度条	boolean	false
actions	底部操作按钮配置	Array<{text, type, handler}>	[]
avatar	聊天模式下的头像 URL	string	—

方法

调用 FyoNotification 或 this.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

方法名	说明
close	关闭当前的 Notification