Notify 是一个 Quasar 插件，可以以通知的形式向用户显示动画消息（浮在页面上的所有内容上方）。它们用于提醒用户某个事件，甚至可以通过操作来吸引用户参与。也称为吐司或 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!')
// or with a config object:
Notify.create({
message: 'Danger, Will Robinson! Danger!'
})import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.notify('Message')
// or with a config object:
$q.notify({...})
}提示
如果定义了任何操作，则当用户选择操作时，通知将自动关闭。
带标题
带图标、头像或加载动画
带操作
多行
定位
提示
有关所有选项的完整列表，请查看 API 部分。
分组
每个通知都有一个底层的唯一组，该组根据消息 + 标题 + 多行 + 操作标签 + 位置计算得出。当多个通知使用相同的组触发时，系统不会显示所有通知并使视图混乱，而只会保留第一个通知以及一个徽章。徽章内容表示自第一个通知出现在屏幕上以来，相同通知（以及相同位置）被触发的次数。
但是，如果要禁用此行为，请指定 group: false。在下面的示例中，第一个按钮每次单击都会触发两次相同的通知。第二个按钮禁用了分组。但是，第三个按钮具有自定义组名称，因此每个后续通知都会替换旧通知并增加徽章编号。
超时进度
如果需要，有一种方法可以告诉用户通知何时会从屏幕上消失。这是在超时未设置为 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: true 属性，则可以在消息中使用 HTML。**请注意，这可能导致 XSS 攻击**，因此请确保自行清理消息。
设置属性
您可以通过设置 attrs 对象属性在通知本身上设置自定义 HTML 属性。对于单个通知操作，您可以像传递任何其他属性一样直接传递它们。
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.notify({
// ...
attrs: {
// for the notification itself:
role: 'alertdialog'
},
actions: [
{
icon: 'close',
// for individual action (button):
'aria-label': 'Dismiss'
}
]
})
}以编程方式关闭
通知旨在仅由用户关闭，但在特殊情况下，您可以以编程方式关闭它们。当您设置无限超时 (0) 时，这尤其有用。
const dismiss = $q.notify({...})
...
dismiss()设置默认值
有两种方法可以设置将应用于所有通知的默认配置：通过 quasar.config 文件 > framework > config > notify 对象（请参阅安装部分）或以编程方式（请参阅下文）。
我们将描述通过 @quasar/app-vite Boot 文件 或 @quasar/app-webpack Boot 文件 设置默认值（在代码中的任何位置都可以正常工作，但启动文件可确保在应用程序启动之前运行此文件）
首先，我们创建启动文件。让我们将其命名为“notify-defaults.js”。
$ quasar new boot notify-defaults [--format ts]将创建的 notify-defaults.js 文件添加到 /quasar.config 文件中的 boot 数组中
module.exports = function (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' }]
})警告
您只能通过此方法设置默认 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' }]
})
}