Dialog 对话框 #

<template>
  <b-button type="primary" @click="add" :plain="true">Click to open the Dialog</b-button>
  <b-dialog
    v-model="dialogVisible"
    :title="header"
    @open="open"
    @close="close"
    :open-delay="openDelay"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <button @click="dialogVisible = false">Cancel</button>
        <button @click="dialogVisible = false">Confirm</button>
      </span>
    </template>
  </b-dialog>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const header = 'header';
    const dialogVisible = ref(false);
    const open = () => {
      console.log('open');
    };
    const close = () => {
      console.log('close');
    };
    const add = () => {
      dialogVisible.value = true;
    };
    const openDelay = ref(1000);
    return {
      header,
      dialogVisible,
      open,
      close,
      openDelay,
      add,
    };
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
}
.dialog-footer button {
  width: 80px;
  margin: 0 10px;
  border: 1px solid #454ce1;
  border-radius: 2px;
}
</style>