报告问题编辑此页面

警报

通过少数可用的灵活警报消息，为典型的用户操作提供上下文反馈消息。

概述

警报可用于任何长度的文本，以及可选的关闭按钮（和可选的自动关闭）。

<template>
  <div>
    <b-alert show>Default Alert</b-alert>

    <b-alert variant="success" show>Success Alert</b-alert>

    <b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
      Dismissible Alert!
    </b-alert>

    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="warning"
      @dismissed="dismissCountDown=0"
      @dismiss-count-down="countDownChanged"
    >
      <p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
      <b-progress
        variant="warning"
        :max="dismissSecs"
        :value="dismissCountDown"
        height="4px"
      ></b-progress>
    </b-alert>

    <b-button @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-button>
    <b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
      Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dismissSecs: 10,
        dismissCountDown: 0,
        showDismissibleAlert: false
      }
    },
    methods: {
      countDownChanged(dismissCountDown) {
        this.dismissCountDown = dismissCountDown
      },
      showAlert() {
        this.dismissCountDown = this.dismissSecs
      }
    }
  }
</script>

<!-- b-alert.vue -->

可见状态

使用 show 属性来控制警报的可视性状态。默认情况下，警报不显示。设置属性 show 以明确显示它们。

show 属性接受布尔值 true 或 false，分别显示和隐藏警报。它还可以设置为一个正整数（表示秒数）以创建一个自动关闭的警报。有关详细信息，请参阅下面的 自动关闭警报 部分。

v-model 支持

你可以使用 v-model 指令在 show 属性上创建双向数据绑定，如上面的 v-model="showDismissibleAlert"。当使用可关闭时非常有用，因为当用户关闭警报时，你的变量将被更新。使用 v-model 时，不要使用 show 属性。

上下文变体

为了正确设置 <b-alert> 的样式，请使用四个必需的上下文变体之一，方法是将 variant 属性设置为以下之一： info、success、warning 或 danger。默认值为 info。

<div>
  <b-alert show variant="primary">Primary Alert</b-alert>
  <b-alert show variant="secondary">Secondary Alert</b-alert>
  <b-alert show variant="success">Success Alert</b-alert>
  <b-alert show variant="danger">Danger Alert</b-alert>
  <b-alert show variant="warning">Warning Alert</b-alert>
  <b-alert show variant="info">Info Alert</b-alert>
  <b-alert show variant="light">Light Alert</b-alert>
  <b-alert show variant="dark">Dark Alert</b-alert>
</div>

<!-- b-alert-variants.vue -->

向辅助技术传达含义

使用颜色变体来添加含义仅提供视觉指示，不会传达给辅助技术（例如屏幕阅读器）的用户。确保颜色表示的信息要么从内容本身（例如可见文本）中显而易见，要么通过其他方式包含，例如使用 .sr-only 类隐藏的附加文本。

警报中附加的内容

<b-alerts> 还可以包含其他 HTML 元素，例如标题和段落，这些元素将以与变体匹配的适当颜色设置样式。

<div>
  <b-alert show variant="success">
    <h4 class="alert-heading">Well done!</h4>
    <p>
      Aww yeah, you successfully read this important alert message. This example text is going to
      run a bit longer so that you can see how spacing within an alert works with this kind of
      content.
    </p>
    <hr>
    <p class="mb-0">
      Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
    </p>
  </b-alert>
</div>

<!-- b-alert-content.vue -->

使用 .alert-link 实用 CSS 类在任何警报中快速提供匹配颜色的链接。在 <a> 或 <b-link> 上使用。

<div>
  <b-alert show variant="primary"><a href="#" class="alert-link">Primary Alert</a></b-alert>
  <b-alert show variant="secondary"><a href="#" class="alert-link">Secondary Alert</a></b-alert>
  <b-alert show variant="success"><a href="#" class="alert-link">Success Alert</a></b-alert>
  <b-alert show variant="danger"><a href="#" class="alert-link">Danger Alert</a></b-alert>
  <b-alert show variant="warning"><a href="#" class="alert-link">Warning Alert</a></b-alert>
  <b-alert show variant="info"><a href="#" class="alert-link">Info Alert</a></b-alert>
  <b-alert show variant="light"><a href="#" class="alert-link">Light Alert</a></b-alert>
  <b-alert show variant="dark"><a href="#" class="alert-link">Dark Alert</a></b-alert>
</div>

<!-- b-alert-links.vue -->

可关闭警报

使用 dismissible 属性，可以在行内关闭任何 <b-alert>。这将添加一个关闭 X 按钮。使用 dismiss-label 属性更改与关闭按钮关联的隐藏标签文本。

<div>
  <b-alert show dismissible>
    Dismissible Alert! Click the close button over there <b>&rArr;</b>
  </b-alert>
</div>

<!-- b-alert-dismiss.vue -->

自动关闭警报

要创建一个在一段时间后自动关闭的 <b-alert>，将 show 属性（或 v-model）设置为希望 <b-alert> 保持可见的秒数。仅支持整数秒数。

<template>
  <div>
    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="warning"
      @dismissed="dismissCountDown=0"
      @dismiss-count-down="countDownChanged"
    >
      This alert will dismiss after {{ dismissCountDown }} seconds...
    </b-alert>
    <b-button @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dismissSecs: 5,
        dismissCountDown: 0
      }
    },
    methods: {
      countDownChanged(dismissCountDown) {
        this.dismissCountDown = dismissCountDown
      },
      showAlert() {
        this.dismissCountDown = this.dismissSecs
      }
    }
  }
</script>

<!-- b-alert-auto-dismissing.vue -->

淡出警报

使用 fade 属性启用动画。默认情况下，警报不会进行动画处理。

<template>
  <div>
    <b-alert show dismissible fade>Dismissible Alert!</b-alert>

    <b-alert
      variant="danger"
      dismissible
      fade
      :show="showDismissibleAlert"
      @dismissed="showDismissibleAlert=false"
    >
      Dismissible Alert!
    </b-alert>

    <b-alert
      :show="dismissCountDown"
      dismissible
      fade
      variant="warning"
      @dismiss-count-down="countDownChanged"
    >
      This alert will dismiss after {{ dismissCountDown }} seconds...
    </b-alert>

    <b-button @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-button>
    <b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
      Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dismissSecs: 5,
        dismissCountDown: 0,
        showDismissibleAlert: false
      }
    },
    methods: {
      countDownChanged(dismissCountDown) {
        this.dismissCountDown = dismissCountDown
      },
      showAlert() {
        this.dismissCountDown = this.dismissSecs
      }
    }
  }
</script>

<!-- b-alert-fade.vue -->

组件参考

<b-alert>

查看源代码

属性

所有属性默认值都 全局可配置。

属性
类型
默认值
描述
dismiss-label
字符串'关闭'关闭按钮的“aria-label”属性的值
可关闭
布尔值false设置后，启用关闭按钮
淡出
布尔值false设置为“true”时，启用组件的淡出动画/过渡
显示
v-model 		布尔值或数字或字符串false设置后，显示警告。设置为数字（秒数）以在经过指定秒数后显示并自动关闭警告
变体
字符串'info'将 Bootstrap 主题颜色变体之一应用于组件

v-model

属性
事件
显示input

插槽

名称
描述
关闭 关闭按钮的内容
默认 放置在警告中的内容

事件

事件
参数
描述
关闭倒计时
  1. dismissCountDown - 关闭剩余时间
当 prop show 为数字时，此事件会在倒计时中每秒发出一次
已关闭 通过关闭按钮或关闭倒计时到期后关闭警告
input
  1. show - 警告的布尔状态，或当前倒计时值的数字
用于更新 v-model show 值

导入单个组件

你可以通过以下命名导出将单个组件导入到你的项目中

组件
命名导出
导入路径
<b-alert>BAlertbootstrap-vue

示例

import { BAlert } from 'bootstrap-vue'
Vue.component('b-alert', BAlert)

作为 Vue.js 插件导入

此插件包括上面列出的所有单个组件。插件还包括任何组件别名。

命名导出
导入路径
AlertPluginbootstrap-vue

示例

import { AlertPlugin } from 'bootstrap-vue'
Vue.use(AlertPlugin)