警报栏（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（函数）属性。
动画CSS辅助类 碎片