通知框（Notify）

Notify是一个Quasar插件，可以以通知的形式向用户显示有动画效果的QAlerts（浮动在页面上的所有内容之上）。 它们对警示用户发生了一个事件很有用，甚至可以在操作过程中吸引用户。

安装

编辑 /quasar.conf.js:

framework: {
  plugins: ['Notify']
}

基本用法

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

Notify.create('Warning, warning, Will Robinson!')
// 或者使用一个配置对象：
Notify.create({
  message: 'Warning, warning, Will Robinson!'
})

// 在一个Vue文件内
this.$q.notify('Message')
// 或者使用一个配置对象：
this.$q.notify({...})

您可以在演示页面屏幕的底部看到此通知框。 请注意默认值：

1.通知框是红色的。
2.它有一个5000ms的超时时间。
3.它看起来漂浮在屏幕的底部。
4.动画由屏幕上的通知位置决定。

配置对象

让我们深入分析可用于通知框的不同可选属性。

this.$q.notify({
  // 必需的参数是消息：
  message: `A text with your alert's awesome message`,

  /*
   * 以下所有参数都是可选的：
   */

  timeout: 3000, // 以毫秒为单位; 0意味着没有超时

  // "type"添加一个颜色和图标，
  // 所以你不需要指定它们。
  // 可用的值: 'positive', 'negative', 'warning', 'info'
  type: 'positive',

  color: 'positive',
  textColor: 'black', // 如果默认的“white”不适合

  icon: 'wifi',
  // or
  avatar: 'statics/boy-avatar.png',

  detail: 'Optional detail message.',
  position: 'top-right', // 'top', 'left', 'bottom-left'等

  actions: [
    {
      label: 'Snooze',
      icon: 'timer', // 可选
      noDismiss: true, // 可选, v0.15.11+
      handler: () => {
        console.log('acting')
      }
    },
    {
      label: 'Dismiss',
      handler: () => {
        console.log('dismissed')
      }
    }
  ],

  onDismiss () { // v0.15.11+
    //...
  }
})

注意
如果您定义了任何操作，则用户选择操作时通知框将自动关闭。

以编程方式关闭警报框

通知框只能由用户关闭，但对于特殊情况，您可以通过编程方式进行关闭。 当您设置无限期超时（0）时特别有用。

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

通知框类型

Quasar提供了为不同类型成功或失败消息创建开箱即用通知框的可能性。 通知类型具有特定的图标和颜色。

我们讨论的通知框类型有：“positive”（成功消息），“negative”（错误消息），“warning”和“info”。 以下是创建它们的方法：

this.$q.notify({
  type: 'positive',
  ...
})
模态框 弹出框