警报栏(Alert)

QAlert是一个包含可选操作按钮的组件,允许您向用户显示信息类消息。

安装

编辑 /quasar.conf.js:

framework: {
components: ['QAlert']
}

基础用法

<q-alert color="primary">
Some cool message
</q-alert>

<q-alert
type="positive"
icon="cloud"
:actions="[{label: 'Snooze', handler () {}}]"
>
Some cool message for your users.
</q-alert>

作为提示,您还可以为其添加动画。 确保你在/quasar.conf.js指定了动画

<transition
enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutRight"
appear
>
<q-alert
v-if="visible"
color="secondary"
icon="cloud"
appear
:actions="[{ label: 'Dismiss', handler: () => { visible = false } }]"
class="q-mb-sm"
>
Lorem ipsum dolor sit amet.
</q-alert>
</transition>

Vue属性

将警报栏用作组件时,以下是可用的属性:

属性 类型 说明
type 字符串 ‘positive’,’negative’,’warning’,’info’之一。应用相应的颜色和图标,以便您可以跳过指定的这些属性。
color 字符串 这可以是Quasar调色板下设置的任何颜色。
text-color 字符串 这可以是在Quasar调色板下设置的任何颜色(用于文本)。
message 字符串 警报栏的内容消息,如果您没有将其添加为QAlert的子项。
detail 字符串 警报栏的副消息,作为一个细节。
icon 字符串 要使用的图标。请参阅图标
avatar 字符串 图像文件(使用静态文件夹)。
actions 对象数组 在警报栏中放置一个或多个按钮,如“Snooze”或“Abort”。 数组中的每个对象都必须具有label(字符串)和handler(函数)属性。