对话框 Modal ​

在当前页面打开一个与用户对话、交互的弹框。

基础用法 ​

基础的弹框使用方式

<template>
  <bp-button @click="handleOpen">Open modal</bp-button>

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

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

const show = ref(false);

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

自定义底部 ​

通过底部插槽 footer 自定义内容

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

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

    <template #footer>
      <bp-space justify="flex-end">
        <bp-button type="plain" @click="show = false">Cancle</bp-button>
        <bp-button type="primary" status="danger" @click="show = false">Confirm delete</bp-button>
      </bp-space>
    </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
false
title
对话框标题
String
标题
title-align
标题对齐方式
Enum
left
width
对话框宽度
String
600px
top
对话框距离顶部高度
String
20vh
hide-footer
是否隐藏底部区域
Boolean
false
hide-close
是否隐藏关闭图标
Boolean
false
border
是否展示边框
Boolean
false
mask-closable
点击遮罩是否关闭
Boolean
false
ok-loading
确认按钮是否处于加载状态
Boolean
false
ok-text
确定按钮内容
String
确认
cancle-text
取消按钮内容
String
取消
on-before-ok
触发确定前的回调，返回 false 则中断
Function
() => true
cancle
对话框取消按钮触发
-
ok
对话框确定按钮触发
-