通知

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

安装

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

TIP

如果您定义了任何操作,则当用户选择通知时,该通知将自动被取消。

带标题

Caption

带图标、头像或旋转器

With icon
With avatar
With spinner

带操作

With actions

多行

Multiline

定位

Positioning & different options

TIP

有关选项的完整列表,请检查“API”部分。

分组

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

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

Grouping
Custom badge

Timeout progress

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

Timeout progress

可更新通知

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

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

Updatable

预定义类型

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

Out of the box types

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

Custom type
// 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攻击,因此请您自己确保消息安全。

Unsafe HTML message

设置属性

您可以通过设置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

将创建的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' }]
})

WARNING

您只能通过此方法设置默认的actions。 在quasar.conf.js中使用处理程序指定actions不能也不会起作用。

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

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

Notify API

Loading API...
Please wait...