通知框(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',
...
})