Notify 是一个 Quasar 插件，可以向用户展示动画消息提示（浮动在页面所有内容之上），表现形式为通知。它常用于提醒用户某个事件的发生，甚至可以通过操作按钮与用户进行交互。在其他框架中也被称为 toast 或 snackbar。
// quasar.config file
return {
framework: {
plugins: [
'Notify'
],
config: {
notify: /* look at QuasarConfOptions from the API card */
}
}
}用法
基础用法
import { Notify } from "quasar";
Notify.create("Danger, Will Robinson! Danger!");
// 或者传入一个配置对象：
Notify.create({
message: "Danger, Will Robinson! Danger!",
});import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.notify('Message')
// 或者传入一个配置对象：
$q.notify({...})
}TIP
如果你定义了操作按钮（actions），当用户点击操作按钮时，通知会自动关闭。
带有副标题
带有图标、头像或加载动画
带有操作按钮
多行文本
定位
TIP
完整的选项列表请查看 API 部分。
消息分组
每条通知都有一个底层的唯一分组标识，它由 message + caption + multiLine + actions 的 label + position 计算得出。当多条相同分组的通知被触发时，不会全部显示在屏幕上造成视觉轰炸，而是只保留第一条通知并附带一个徽标。徽标的数字代表自第一条通知出现以来，相同通知（且相同位置）被触发的次数。
如果你希望禁用此行为，可以设置 group: false。在下面的示例中，第一个按钮每次点击都会触发两条相同的通知。第二个按钮禁用了分组功能。第三个按钮使用了自定义的分组名称，因此每条新通知会替换旧通知并增加徽标数字。
超时进度条
如果你希望让用户知道通知何时会从屏幕上消失，可以启用超时进度条。这适用于 timeout 不为 0 的场景。
可更新的通知
如果你有一个正在进行的任务，希望在不打断用户当前操作的情况下实时展示任务进度，可以使用可更新通知。同时配合加载动画效果更佳。
请注意，在下面的示例中我们显式设置了 “group: false”（因为只有未分组的通知才能被更新）以及 “timeout: 0”（因为我们想完全控制通知的关闭时机）。
预定义类型
内置了四种开箱即用的预定义类型：“positive”（成功）、“negative”（错误）、“warning”（警告）和 “info”（信息）：
此外，你还可以注册自定义类型，甚至覆盖内置的预定义类型。最佳的注册位置是在 @quasar/app-vite Boot 文件 或 @quasar/app-webpack Boot 文件 中。
import { Notify } from "quasar";
Notify.registerType("my-notif", {
icon: "announcement",
progress: true,
color: "brown",
textColor: "white",
classes: "glossy",
});使用 HTML
你可以在消息中使用 HTML，只需设置 html: true 属性。请注意这可能导致 XSS 攻击，因此务必自行对消息内容进行安全过滤。
设置 HTML 属性
你可以通过 attrs 对象属性为通知本身设置自定义 HTML 属性。对于单个操作按钮，可以像其他属性一样直接传递。
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.notify({
// ...
attrs: {
// 用于通知本身：
role: 'alertdialog'
},
actions: [
{
icon: 'close',
// 用于单个操作按钮：
'aria-label': 'Dismiss'
}
]
})
}编程式关闭
通知本意是由用户手动关闭的，但在特殊情况下你也可以通过编程方式关闭它。这在设置了无限超时（timeout 为 0）时尤其有用。
const dismiss = $q.notify({...})
...
dismiss()设置默认值
有两种方式可以为所有通知设置默认配置：通过 quasar.config 文件中的 framework > config > notify 对象（见安装部分），或通过编程方式设置（见下方）。
下面介绍如何通过 @quasar/app-vite Boot 文件 或 @quasar/app-webpack Boot 文件 来设置默认值（在代码中的任何地方都可以使用相同的方式，但放在 boot 文件中可以确保在应用启动前执行）：
首先创建一个 boot 文件，命名为 “notify-defaults.js”。
$ quasar new boot notify-defaults [--format ts]将创建的 notify-defaults.js 文件添加到 /quasar.config 文件的 boot 数组中：
export default (ctx) => {
return {
// ...
boot: ['notify-defaults'],
// ...
}然后编辑新创建的 /src/boot/notify-defaults.js 文件：
import { Notify } from "quasar";
Notify.setDefaults({
position: "top-right",
timeout: 2500,
textColor: "white",
actions: [{ icon: "close", color: "white" }],
});WARNING
只能通过这种方式设置默认的 actions。在 /quasar.config 文件中指定带有处理函数的 actions 是无法生效的。
也可以在 Vue 文件中设置默认值：
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.notify.setDefaults({
position: 'top-right',
timeout: 2500,
textColor: 'white',
actions: [{ icon: 'close', color: 'white' }]
})
}