对话框 Modal

基础用法

vue

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

自定义底部

vue

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

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	确认按钮属性	Object	-	-
cancel-text	取消按钮文字	String	取消	-
cancel-btn-props	取消按钮属性	Object	-	-
hide-cancel	是否隐藏取消按钮	Boolean	-	-
hide-title-icon	是否隐藏标题图标	Boolean	-	-
on-before-ok	确认前回调	Function	-	-

cancel	取消触发	-	-
confirm	确认触发	-	-

default	内容	-	-
header	头部	-	-
footer	底部	-	-

对话框 Modal ​

基础用法 ​

自定义底部 ​

Modal 属性 ​

Modal 事件 ​

Modal 插槽 ​

基础用法

自定义底部

Modal 属性

Modal 事件

Modal 插槽