对话框 Modal

基础用法

<template>
  <bp-button @click="handleClick">open modal</bp-button>
</template>

<script lang="ts" setup>
import { Modal } from "@birdpaper-ui/components";

const handleClick = ()=>{
  Modal.info({
    title: "title",
    content: "content",
  });
}
</script>

自定义底部

<template>
  <bp-button @click="handleOpen">Custom footer</bp-button>

  <bp-modal v-model="show" title="Title">
    <p>Modal content.</p>

    <template #footer>
      <bp-button type="secondary" @click="show = false">Cancle</bp-button>
      <bp-button type="secondary" status="danger" @click="show = false">Confirm delete</bp-button>
    </template>
  </bp-modal>
</template>

<script setup lang="ts">
import { ref } from "vue";

const show = ref(false);

const handleOpen = () => {
  show.value = true;
};
</script>