BootstrapVue Alerts 警告框

BootstrapVue Alerts警告框来代替js原生的alert方法有更好的UI和体验，但需要注意的是BootstrapVue的Alerts并不像原生js的alert是阻塞（一旦弹出用户无法继续其他操作只能确认）的。

例子

Alerts属性

属性名称	类型	说明
variant	String	默认值'info' 警告框样式，可选info、primary、secondary、success、danger、 warning、light、dark
dismissible	Boolean	默认false,是否显示关闭按钮
dismiss-label	String	dismiss无障碍文字提示
show v-model	Boolean	默认false，控制隐藏还是显示显示
fade	Boolean	默认false，是否启用过渡效果

Alerts事件

事件名称	参数	说明
dismissed	无	关闭Alerts的回调事件
dismiss-count-down	dismissCountDown	关闭倒计时事件，每秒执行一次
input	e	Alerts的显示状态true或false,或者倒计时的dismissCountDown值

Alerts插槽

插槽名称	说明
dismiss	关闭Alerts按钮的插槽

<b-alert variant="success" show  :dismissible="true" fade="true">
  Success Alert（成功）
   <template v-slot:dismiss>
      <b-icon icon="trash"></b-icon>
   </template>
</b-alert>

单独引用Alerts组件

//按需加载组件，只引用使用到的组件，减少网络加载体积加快加载速度
import { BAlert } from 'bootstrap-vue'
Vue.component('b-alert', BAlert)

完整代码

<template>
  <div id="app">
    <b-alert show>Default Alert(默认)</b-alert>
    <b-alert variant="success" show  dismissible="true" fade="true">Success Alert（成功）</b-alert>
    <b-alert
      v-model="showDismissibleAlert"
      variant="danger"
      dismissible
      @dismissed="dismissed"
      @input="input"
    >带关闭的Alert!</b-alert>
    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="warning"
      @dismissed="dismissCountDown=0"
      @dismiss-count-down="countDownChanged"
      @input="input"
    >
      <p>警告提示会在{{ dismissCountDown }} 秒后自动关闭...</p>
      <b-progress variant="warning" :max="dismissSecs" :value="dismissCountDown" height="4px"></b-progress>
    </b-alert>
    <b-button @click="showAlert" variant="info" class="m-1">显示警告提示后自动关闭</b-button>
    <b-button
      @click="showDismissibleAlert=!showDismissibleAlert"
      variant="info"
      class="m-1"
    >显示隐藏警告提示（{{ showDismissibleAlert ? 'hidden' : 'visible' }})</b-button>
    <div>{{msg}}</div>
  </div>
</template>
<script>
//导入vue和BootstrapVue
import Vue from "vue";
import { BootstrapVue } from "bootstrap-vue";
//注册BootstrapVue组件
Vue.component("BootstrapVue", BootstrapVue);

export default {
  name: "App",
  data() {
    return {
      msg: "",
      //设置10秒后关闭
      dismissSecs: 10,
     //剩余多少秒后关闭
      dismissCountDown: 0,
      //隐藏显示alerts组件
      showDismissibleAlert: false,
    };
  },
  methods: {
    //关闭事件
    dismissed() {
      this.msg = "关闭了alert";
    },
    //inputs事件（关闭和倒计时触发）
    input(e) {
      this.msg = e;
    },
    //倒计时事件
    countDownChanged(dismissCountDown) {
      this.dismissCountDown = dismissCountDown;
    },
    showAlert() {
      this.dismissCountDown = this.dismissSecs;
    },
  },
};
</script>