抽屉 Drawer

基础用法

<template>
  <bp-space>
    <bp-button @click="handleOpen('right')">Open Right</bp-button>
    <bp-button @click="handleOpen('up')">Open up</bp-button>
    <bp-button @click="handleOpen('left')">Open left</bp-button>
    <bp-button @click="handleOpen('down')">Open down</bp-button>
  </bp-space>

  <bp-drawer v-model="show" :placement> </bp-drawer>
</template>

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

const show = ref(false);
const placement = ref("right");

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

Drawer 属性

v-model	是否显示	Boolean	-	-
title	标题	String	标题	-
width	宽度	String	360px	-
height	高度	String	360px	-
placement	弹出方向	String	right	-
hide-footer	是否隐藏底部	Boolean	-	-
hide-close	是否隐藏关闭按钮	Boolean	-	-
border	是否显示边框	Boolean	-	-
mask-closable	点击遮罩是否关闭	Boolean	true	-
ok-text	确认按钮文字	String	确认	-
cancle-text	取消按钮文字	String	取消	-
on-before-ok	确认前回调	Function	-	-

Drawer 事件

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

Drawer 插槽

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