BootstrapVue Alerts 警告框

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

例子

Alerts属性

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

Alerts事件

事件名称参数说明
dismissed关闭Alerts的回调事件
dismiss-count-downdismissCountDown关闭倒计时事件,每秒执行一次
inputeAlerts的显示状态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>