通知

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

安装


// quasar.config.js

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

用法

基础

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



TIP

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

带标题
v1.5.5+




带图标或头像







带操作




多行




定位




TIP

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

分组
v1.9+

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

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







过期进度
v1.9+

如果您愿意,有一种方法可以告诉用户通知何时从屏幕上消失。这是针对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攻击,因此请您自己确保消息安全。




以编程方式关闭

通知只能由用户关闭,但是在特殊情况下,您可以通过编程方式进行处理。 设置不确定的超时时间(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