Notify 通知

Notify 是一个 Quasar 插件，它以通知的形式向用户展示带动画的消息(浮动在页面的所有内容之上)。对于提醒用户某个事件非常有用，甚至可以通过操作按钮吸引用户交互。也被称为 toast 或者 snackbar。

Notify API

安装

// quasar.config.js

return {
  framework: {
    plugins: [
      'Notify'
    ],
    config: {
      notify: { /* 参考 API 卡片中的 QuasarConfOptions  */ }
    }
  }
}

用法

基础

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

Notify.create('Danger, Will Robinson! Danger!')
// 或者带有配置对象:
Notify.create({
  message: 'Danger, Will Robinson! Danger!'
})

// 在 Vue 文件之内
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.notify('Message')
  // 或者带有配置对象:
  $q.notify({...})
}

带有副标题

带有图标，头像或者加载动画

带有操作按钮

多行信息

出现的位置

分组

每个通知都会按照内容（message + caption + multiLine + actions labels + position）被自动划分到一个组中。也可以使用 group 字段手动分组。

当多个被划分到同组中的提示相继被触发时，屏幕上只会显示一个通知，后面触发的会替换前面的，并且带有一个角标，角标的内容是被触发的通知个数。

然而，如果您想禁用此行为，可以设置group: false。 下面的示例中，第一个按钮触发的两个内容相同的提示，它们被划分到同一组中，屏幕上只会显示一个通知，角标为 2。 第二个按钮触发了两个相同内容的通知，但是配置了group: false，所以屏幕上显示了两个通知。 第三个按钮触发了两个内容不同的通知，但是它们被手动划分到同一个组中，所以屏幕上只有一个通知，内容为后触发的，角标为 2。

倒计时进度条

如果您希望，可以告知用户这个通知什么时候会消失，可以看看下面的列子，只需要设置：progress: true 即可。

更新通知的内容

如果您有一个正在进行的工作，并且希望在不阻止用户当前正在做的事情的情况下通知其进度，那么您可以生成一个可更新的通知。此时显示一个加载动画也是很有用的。

请注意在下面的示例中，设置了group: false(因为只有不分组的通知才能更新)和timeout: 0(因为我们想完全控制此通知的关闭)

预设的通知类型

我们预设了四种开箱即用的通知类型： “positive”, “negative”, “warning” 和 “info”:

此外，您也可以注册自己的通知类型或者修改上述的预设类型，最好的方式是在一个 boot 文件中做此事，@quasar/app-vite Boot File 或 @quasar/app-webpack Boot File.

// 如何在一个 boot 文件中注册类型：

import { Notify } from 'quasar'

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

使用 HTML

若设置了html: true字段，也可以使用 html 作为 message，一定要注意这样做可能导致 XSS 攻击，所以一定要自己保证 message 的安全。

设置属性

也可以通过设置attrs对象字段为通知的 DOM 或者它的子元素操作按钮（actions）的 DOM 自定义 HTML 属性：

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.notify({
    ...

    attrs: {
      // 为通知的 DOM 本身设置属性:
      role: 'alertdialog'
    },

    actions: [
      {
        icon: 'close',
        // 为通知的操作按钮 DOM 设置属性:
        attrs: {
          'aria-label': 'Dismiss'
        }
      }
    ]
  })
}

通过编程关闭通知

通知只能由用户关闭，但在特殊情况下，您可以通过代码关闭它。在设置了timeout:0时尤其有用。

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

设置默认值

有两种方式设置全局的默认配置：通过 quasar.config.js > framework > config > notify 对象配置（配置对象见 API 卡片部分），或者：

通过一个 boot 文件（@quasar/app-vite Boot File 或 @quasar/app-webpack Boot File）来设置全局的默认配置。

首先，我们创建一个 boot 文件，示例取名为：“notify-defaults.js”.

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

将其文件名添加至quasar.config.js的 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' }]
})

也可以在 Vue 文件中设置默认配置：

// inside of a Vue component
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

类型定义

export type QNotifyUpdateOptions = Omit<
  QNotifyCreateOptions,
  "group" | "position"
>;
export type QNotifyOptions = Omit<QNotifyCreateOptions, "ignoreDefaults">;

export type QNotifyAction = Omit<QBtnProps, "onClick"> &
  ButtonHTMLAttributes & { noDismiss?: boolean; handler?: () => void };