警告提示框(Alert)

BootstrapVue组件和插件。

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

<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>

可见状态

使用.show方法来控制警告提示框的可见性状态。默认不显示。

该.show方法接受布尔true 或 false显示和隐藏分别警报。也可以将其设置为正整数（代表秒数）以创建自消灭警报。

v-model支持

可以使用v-model指令在show prop上创建双向数据绑定。使用dismissible时很有用，是因为当用户关闭警告提示框时，变量将被更新。使用show时请勿使用v-model。

上下文变体

对于适当的造型<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>

向辅助技术传达意义

使用颜色变体添加含义仅提供视觉指示，而不会传达给辅助技术的用户（例如屏幕阅读器）。确保用颜色表示的信息在内容本身（例如可见文本）中是显而易见的，或者通过替代方式包括在该信息中，例如在.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>

使用.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>

可忽略的警告提示框

使用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>会在一段时间后自动关闭的，请将show prop (或 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>

褪色警告提示框

使用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>

View source

物产

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

模型

属性 事件
show input

插槽

插槽名称 描述
dismiss 关闭按钮的内容。

大事件

事件 争论 描述
dismissed 通过“关闭关闭”按钮或在关闭倒计时结束时关闭了警告提示框
dismiss-count-down
  1. dismissCountDown - 剩余的解雇时间
 当方法展示是一个数字时，此事件将在倒计时时每秒发出一次。
input
  1. show - 警告提示框的布尔状态，或数字为当前倒计时值
 用于更新v模型的显示值

导入单个组件

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

零件 命名为出口 导入路径
<b-alert> BAlert bootstrap-vue

例:

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

导入为Vue.js插件

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

命名为出口 导入路径
AlertPlugin bootstrap-vue

例:

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