通知

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

安装

// quasar.conf.js

return {
  framework: {
    plugins: [
      'Notify'
    ],
    config: {
      [object Object]: { /* 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 actions

多行

Multiline

定位

Positioning & different options

TIP

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

使用HTML

如果指定了html: true属性,则可以在消息上使用HTML。 请注意,这可能会导致XSS攻击,因此请您自己确保消息安全。

Unsafe HTML message

以编程方式关闭

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