Drawer 抽屉

从屏幕边缘滑出的面板，用于显示侧边内容或表单。基于 BrConfigProvider 实现全局主题配置。

基础用法

Status: Closed

Example

方向

Example

尺寸

Example

关闭按钮

Example

API

Props

属性名	类型	默认值	说明
open	boolean	false	是否打开
defaultOpen	boolean	false	默认是否打开
direction	string	'bottom'	方向：top, bottom, left, right
dismissible	boolean	true	是否可关闭
modal	boolean	true	是否为模态

DrawerContent Props

属性名	类型	默认值	说明
showHandle	boolean	false	是否显示把手
showClose	boolean	false	是否显示关闭按钮
class	string	-	自定义类名
shouldScaleBackground	boolean	false	是否锁定滚动
activeSnapPoint	string | number	-	嵌套级别

Slots

插槽名	说明
default	触发器内容
content	抽屉内容
header	头部内容
footer	底部内容

Emits

事件名	说明	参数
update:open	打开状态变化时触发	(value: boolean)
close	关闭时触发	-

使用示例

<template>
  <BrDrawer v-model:open="isOpen">
    <BrDrawerTrigger>
      <BrButton>打开抽屉</BrButton>
    </BrDrawerTrigger>
    <BrDrawerContent>
      <BrDrawerHeader>
        <BrDrawerTitle>标题</BrDrawerTitle>
      </BrDrawerHeader>
      <div>内容...</div>
    </BrDrawerContent>
  </BrDrawer>
</template>

<script setup>
import { ref } from 'vue'
import { BrDrawer, BrDrawerTrigger, BrDrawerContent, BrDrawerHeader, BrDrawerTitle, BrButton } from '@breezeui/vue'

const isOpen = ref(false)
</script>