Notify 是一个 Quasar 插件，可以以通知的形式向用户显示动画消息（浮动在页面的所有内容之上）。它们有助于向用户触发事件警报，甚至可以通过操作来吸引用户。也称为 Toast 或 Snackbar。

¥Notify is a Quasar plugin that can display animated messages (floating above everything in your pages) to users in the form of a notification. They are useful for alerting the user of an event and can even engage the user through actions. Also known as a toast or snackbar.

// quasar.config file

return {
  framework: {
    plugins: [
      'Notify'
    ],
    config: {
      notify: /* look at QuasarConfOptions from the API card */
    }
  }
}

用法(Usage)

¥Usage

基本(Basic)

¥Basic

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({...})
}

使用标题(With caption)

¥With caption

带图标、头像或旋转按钮(With icon, avatar or spinner)

¥With icon, avatar or spinner

使用操作(With actions)

¥With actions

多行(Multiline)

¥Multiline

定位(Positioning)

¥Positioning

分组(Grouping)

¥Grouping

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

¥Each notification has an underlying unique group which is computed out of the message + caption + multiLine + actions labels + position. When multiple notifications get triggered with the same group, instead of showing all of them and flooding the view, only the first one remains on screen along with a badge. The badge content represents the number of times that the same notification has been triggered (and with same position) since the first one appeared on screen.

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

¥However, if you wish to disable this behavior, specify group: false. In the example below, the first button triggers the same notification twice each time is clicked. The second button has grouping disabled. The third button, however, has a custom group name so each subsequent notification replaces the old one and increments the badge number.

超时进度(Timeout progress)

¥Timeout progress

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

¥Should you wish, there is a way to tell the user when the notification will disappear from the screen. That’s for the cases when timeout is not set to 0.

可更新通知(Updatable notifications)

¥Updatable notifications

如果你有一个正在进行的进程，并且你想在不阻止用户当前操作的情况下通知用户其进度，那么你可以生成可更新的通知。使用时显示一个旋转图标也很有用。

¥Should you have an ongoing process and you want to inform the user of its progress without blocking what he is currently doing, then you can generate an updatable notification. It’s useful to also show a spinner while at it.

请注意，在下面的示例中，我们明确设置了“group:false"（因为只有非分组通知才能更新）和" 超时：0"（因为我们希望完全控制通知何时关闭）。

¥Please note in the example below that we are explicitly setting “group: false” (because only non-grouped notifications can be updated) and “timeout: 0” (because we want to be in full control when the notification will be dismissed).

预定义类型(Predefined types)

¥Predefined types

你可以使用四种预定义的开箱即用类型：“positive”、“negative”、“warning” 和 “info”：

¥There are four predefined types out of the box that you can use: “positive”, “negative”, “warning” and “info”:

此外，你可以注册自己的类型，甚至可以覆盖预定义的类型。执行此操作的最佳位置是在 @quasar/app-vite Boot File 或 @quasar/app-webpack Boot File 中。

¥Furthermore, you can register your own types or even override the predefined ones. The best place to do this would be in a @quasar/app-vite Boot File or a @quasar/app-webpack Boot File.

import { Notify } from 'quasar'

Notify.registerType('my-notif', {
  icon: 'announcement',
  progress: true,
  color: 'brown',
  textColor: 'white',
  classes: 'glossy'
})

使用 HTML(Using HTML)

¥Using HTML

如果你指定了 html: true 属性，则可以在消息中使用 HTML。请注意，这可能会导致 XSS 攻击，因此请确保你自行清理消息。

¥You can use HTML on message if you specify the html: true prop. Please note that this can lead to XSS attacks, so make sure that you sanitize the message by yourself.

设置属性(Setting attributes)

¥Setting attributes

你可以通过设置 attrs 对象属性来在通知本身上设置自定义 HTML 属性。对于单个通知操作，你可以像传递其他属性一样直接传递它们。

¥You can set custom HTML attributes on the notification itself by setting the attrs Object property. For individual notification actions, you can directly pass them just like any other prop.

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

以编程方式关闭(Programmatically closing)

¥Programmatically closing

通知只能由用户关闭，但在特殊情况下，你可以通过编程方式关闭。当你设置无限超时 (0) 时尤其有用。

¥Notifications are meant to be dismissed only by the user, however for exceptional cases you can do it programmatically. Especially useful when you set indefinite timeout (0).

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

设置默认值(Setting defaults)

¥Setting defaults

有两种方法可以设置应用于所有通知的默认配置：通过 quasar.config 文件 > 框架 > 配置 > 通知对象（参见“安装”部分）或以编程方式（参见下文）设置。

¥There are two ways of setting default configuration that will apply to all Notifications: through quasar.config file > framework > config > notify Object (see Installation section) or programmatically (see below).

我们将介绍如何通过 @quasar/app-vite Boot File 或 @quasar/app-webpack Boot File 设置默认值（在代码中的任何位置都有效，但启动文件可确保在应用启动之前运行此设置）：

¥We’ll describe setting the defaults through a @quasar/app-vite Boot File or a @quasar/app-webpack Boot File (works the same anywhere in your code, but a boot file ensures this is run before your app starts):

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

¥First we create the boot file. Let’s name it “notify-defaults.js”.

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

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

¥Add the created notify-defaults.js file to the boot array in the /quasar.config file:

export default (ctx) => {
  return {
    // ...
    boot: ['notify-defaults'],
    // ...
  }

然后，我们编辑新创建的 /src/boot/notify-defaults.js：

¥We then edit the newly created /src/boot/notify-defaults.js:

import { Notify } from 'quasar'

Notify.setDefaults({
  position: 'top-right',
  timeout: 2500,
  textColor: 'white',
  actions: [{ icon: 'close', color: 'white' }]
})

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

¥We could also set the defaults in some Vue file:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.notify.setDefaults({
    position: 'top-right',
    timeout: 2500,
    textColor: 'white',
    actions: [{ icon: 'close', color: 'white' }]
  })
}