对话框 Modal

模态对话框，在当前页面打开一个浮层承载相关内容。支持模板调用和函数式调用两种方式。

基础用法

通过函数式调用 Modal.info() 等方法快速弹出对话框，适用于简单的确认、提示场景。

<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>

对话框类型

通过函数式调用可快速弹出不同类型对话框：info - 信息，success - 成功，warning - 警告，error - 错误，confirm - 确认。

<template>
  <bp-space :size="16">
    <bp-button @click="openModal('info')">Info</bp-button>
    <bp-button @click="openModal('success')">Success</bp-button>
    <bp-button @click="openModal('warning')">Warning</bp-button>
    <bp-button @click="openModal('error')">Error</bp-button>
    <bp-button @click="openModal('confirm')">Confirm</bp-button>
  </bp-space>
</template>

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

const openModal = (type: string) => {
  (Modal as any)[type]({
    title: `${type} 对话框`,
    content: `这是一个 ${type} 类型的对话框`,
  });
};
</script>

自定义底部

使用 footer 插槽自定义底部按钮区域，适用于需要自定义操作的场景。

<template>
  <bp-button @click="handleOpen">自定义底部</bp-button>

  <bp-modal v-model="show" title="标题">
    <p>对话框内容。</p>

    <template #footer>
      <bp-button type="secondary" @click="show = false">取消</bp-button>
      <bp-button type="secondary" status="danger" @click="show = false">确认删除</bp-button>
    </template>
  </bp-modal>
</template>

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

const show = ref(false);

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

异步确认

通过 on-before-ok 回调实现异步确认，确认按钮会自动进入 loading 状态。返回 true 关闭对话框，返回 false 则保持打开。

<template>
  <bp-button @click="show = true">异步确认</bp-button>

  <bp-modal v-model="show" title="提交确认" :on-before-ok="handleBeforeOk">
    <p>点击确认后将执行异步操作，确认按钮会自动进入 loading 状态。</p>
  </bp-modal>
</template>

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

const show = ref(false);

const handleBeforeOk = async () => {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return true;
};
</script>

全屏

设置 fullscreen 属性使对话框全屏展示，适用于需要大面积内容展示的场景。

<template>
  <bp-button @click="show = true">全屏 Modal</bp-button>

  <bp-modal v-model="show" title="全屏对话框" fullscreen>
    <p>这是一个全屏对话框，适用于需要大面积展示内容的场景。</p>
  </bp-modal>
</template>

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

const show = ref(false);
</script>

自定义插槽

使用 header 插槽自定义头部区域，或使用默认插槽自定义内容区域。

<template>
  <bp-space :size="16">
    <bp-button @click="showHeader = true">自定义头部</bp-button>
    <bp-button @click="showContent = true">自定义内容</bp-button>
  </bp-space>

  <bp-modal v-model="showHeader" title="自定义头部">
    <template #header>
      <div class="custom-header">
        <IconStarFill size="20" style="color: #f7ba2a" />
        <span>自定义标题区域</span>
      </div>
    </template>
    <p>头部区域使用了自定义插槽。</p>
  </bp-modal>

  <bp-modal v-model="showContent" title="自定义内容">
    <div class="custom-content">
      <p>这里可以放置任意自定义内容：</p>
      <ul>
        <li>表单</li>
        <li>表格</li>
        <li>图片</li>
      </ul>
    </div>
  </bp-modal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { IconStarFill } from "birdpaper-icon";

const showHeader = ref(false);
const showContent = ref(false);
</script>

<style lang="scss" scoped>
.custom-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.custom-content {
  ul {
    padding-left: 20px;
    line-height: 2;
  }
}
</style>

Modal 属性

v-model	对话框是否可见	Boolean	-	-
is-method	是否通过函数式调用（内部使用）	Boolean	-	-
type	对话框类型，影响标题图标样式	String	-	-
title	对话框标题	String	-	-
content	对话框内容文本	String	-	-
width	对话框宽度	StringNumber	50%	-
body-class	内容区域自定义样式类	String	-	-
border-radius	对话框圆角	String	8px	-
center	是否垂直居中显示	Boolean	-	-
show-border	是否显示边框	Boolean	true	-
top	距离顶部的偏移量	String	0	-
bottom	距离底部的偏移量	String	0	-
mask-closable	点击遮罩是否关闭对话框	Boolean	true	-
hide-header	是否隐藏头部区域	Boolean	-	-
hide-footer	是否隐藏底部区域	Boolean	-	-
hide-close	是否隐藏关闭按钮	Boolean	-	-
fullscreen	是否全屏显示	Boolean	-	-
ok-text	确认按钮文字	String	确认	-
ok-btn-props	确认按钮属性，透传至 Button 组件	Object	-	-
cancel-text	取消按钮文字	String	取消	-
cancel-btn-props	取消按钮属性，透传至 Button 组件	Object	-	-
hide-cancel	是否隐藏取消按钮	Boolean	-	-
hide-title-icon	是否隐藏标题图标	Boolean	-	-
on-before-ok	确认前的异步回调，返回 true 关闭对话框，返回 false 保持打开。按钮自动进入 loading 状态	Function	-	-

Modal 事件

cancel	点击取消或关闭按钮时触发	-	-
confirm	点击确认按钮后触发	-	-

Modal 插槽

default	对话框内容区域	-	-
header	自定义头部区域	-	-
footer	自定义底部按钮区域	-	-