MessageBox 信息弹出框 #

<template>
  <b-button type="warning" @click="visible = true" :plain="true">Click to open the Message Box</b-button>
  <b-message-box
    :v-model="visible"
    v-show="visible"
    :title="header"
    @open="open"
    @close="close"
    :before-close="beforeClose"
    :close-delay="openDelay"
  >
    <span>It will permanently delete the file. Continue?</span>
    <template #footer>
      <span class="message-box-footer">
        <button @click="visible = false">Cancel</button>
        <button @click="visible = false" style="background:#79bbff;color:#fff">
          OK
        </button>
      </span>
    </template>
  </b-message-box>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const header = 'Warning';
    const visible = ref(false);
    const beforeClose = (done) => {
      return setTimeout(() => {
        done();
      }, 1000);
    };
    const openDelay = ref(2000);
    return {
      header,
      visible,
      open,
      close,
      openDelay,
      beforeClose
    };
  }
};
</script>

<style lang="scss" scoped>
.message-box-footer {
  display: flex;
  justify-content: end;
}
.message-box-footer button {
  width: 80px;
  margin: 10px 20px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
</style>