通知是Quasar插件，可以以通知的形式向用户显示动画消息（浮动在页面上的所有内容上方）。 它们对于提醒用户事件很有用，甚至可以通过操作吸引用户。也称为弹窗（toast）或底部弹窗（snackbar）。

Notify API

安装

// quasar.conf.js

return {
  framework: {
    plugins: [
      'Notify'
    ],
    config: {
      notify: { /* look at QUASARCONFOPTIONS from the API card (bottom of page) */ }
    }
  }
}

用法

基础

// 在Vue文件之外
import { Notify } from 'quasar'

Notify.create('Danger, Will Robinson! Danger!')
// 或使用配置对象：
Notify.create({
  message: 'Danger, Will Robinson! Danger!'
})

// 在Vue文件中
this.$q.notify('Message')
// 或使用配置对象：
this.$q.notify({...})

带标题

v1.5.5+

带图标、头像或旋转器

带操作

多行

定位

分组

v1.9+

每个通知都有一个底层的唯一组，该组是根据消息+标题+多行+操作标签+位置计算的。当同一个组触发多个通知时，屏幕上只保留第一个通知和一个徽章，而不是显示所有通知和整个视图。徽章内容表示自第一个通知出现在屏幕上以来，同一通知已被触发（且位置相同）的次数。

但是，如果要禁用此行为，请指定group: false。在下面的示例中，第一个按钮每次单击都会触发相同的通知两次。第二个按钮禁用分组。但是，第三个按钮有一个自定义组名，因此每个后续通知都会替换旧的通知并增加徽章编号。

Timeout progress

v1.9+

如果您愿意，有一种方法可以告诉用户通知何时从屏幕上消失。这是针对timeout未设置为0的情况。

可更新通知

v1.14+

如果您有一个正在进行的进程，并且您希望在不阻止用户当前正在做的事情的情况下通知用户，那么您可以生成一个可更新的通知。同时显示旋转器也是有用的。

请注意，在下面的示例中，我们显式地设置了“group: false”（因为只能更新未分组的通知）和“timeout: 0”（因为我们希望在取消通知时完全控制）。

预定义类型

v1.9+

有四种现成的预定义类型可以使用：“positive”、“negative”、“warning” and “info”：

此外，您可以注册自己的类型，甚至覆盖预定义的类型。最好的方法是在启动文件中。

// How to register in a boot file:

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属性。

this.$q.notify({
  ...

  attrs: {
    // for the notification itself:
    role: 'alertdialog'
  },

  actions: [
    {
      icon: 'close',
      // for individual action (button):
      attrs: {
        'aria-label': 'Dismiss'
      }
    }
  ]
})

以编程方式关闭

通知只能由用户关闭，但是在特殊情况下，您可以通过编程方式进行处理。 设置不确定的超时时间（0）时特别有用。

const dismiss = this.$q.notify({...})
...
dismiss()

设置默认值

有两种设置默认配置(适用于所有通知)的方法：通过 quasar.conf.js > framework > config > notify Object (请参阅安装部分) 或以编程方式（请参见下文）.

我们将描述通过启动文件设置默认值的方法（在代码中的任何地方都可以使用相同的设置，但是启动文件可确保在应用启动之前运行该默认设置）：

首先，我们创建启动文件。 我们将其命名为“notify-defaults.js”。

$ quasar new boot notify-defaults [--format ts]

将创建的notify-defaults.js文件添加到quasar.conf.js中的启动数组中：

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' }]
})

我们还可以在一些Vue文件中设置默认值：

// 在Vue组件内部
this.$q.notify.setDefaults({
  position: 'top-right',
  timeout: 2500,
  textColor: 'white',
  actions: [{ icon: 'close', color: 'white' }]
})