Drawer

基于 vaul-vue 的抽屉组件,支持从四个方向滑入,适合移动端下拉面板、侧边栏等场景。

Anatomy

• Drawer抽屉根,承载 open/direction 等状态 (vaul-vue DrawerRoot 的别名)
  • DrawerTrigger触发器,点击打开抽屉
  • DrawerOverlay背景蒙层,点击可关闭
  • DrawerContent抽屉面板容器,已内置 Portal 与 Overlay
  • DrawerClose关闭按钮,可 as-child 包裹任意元素

TIP

DrawerContent 内部会自动渲染 DrawerPortal 与 DrawerOverlay,所以通常不需要再手动写 DrawerOverlay;只有当你希望自定义 overlay 样式时才单独放置。

基本用法

从底部滑入

默认方向,适合移动端操作面板。

<script setup lang="ts">
import { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from '@tripo3d/design';
</script>

<template>
  <Drawer>
    <DrawerTrigger>打开底部抽屉</DrawerTrigger>
    <DrawerContent class="bg-gray-2 p-6 rounded-t-4">
      <h4>底部抽屉</h4>
      <p>向下拖动或点击蒙层可关闭。</p>
      <DrawerClose>关闭</DrawerClose>
    </DrawerContent>
  </Drawer>
</template>

方向

direction="right"

从右侧滑入,常用于桌面端侧边栏。

<Drawer direction="right">
  <DrawerTrigger>从右侧打开</DrawerTrigger>
  <DrawerContent class="bg-gray-2 p-6 w-80 h-full">
    ...
  </DrawerContent>
</Drawer>

direction="left"

<Drawer direction="left">
  <DrawerTrigger>从左侧打开</DrawerTrigger>
  <DrawerContent class="bg-gray-2 p-6 w-80 h-full">
    ...
  </DrawerContent>
</Drawer>

direction="top"

<Drawer direction="top">
  <DrawerTrigger>从顶部打开</DrawerTrigger>
  <DrawerContent>...</DrawerContent>
</Drawer>

API

Drawer Props

名称	类型	默认值	说明
open	boolean	—	受控开关状态
defaultOpen	boolean	—	非受控初始状态
direction	'top' | 'bottom' | 'left' | 'right'	'bottom'	抽屉滑入方向
modal	boolean	true	是否锁定背景滚动
dismissible	boolean	true	是否允许通过蒙层 / 拖动手势关闭

其余 props 透传至 vaul-vue DrawerRoot。

Drawer Events

事件	Payload	说明
update:open	(open: boolean)	开关状态变化

DrawerContent Props

名称	类型	默认值	说明
class	string	—	面板额外 class;组件已按 direction 内置定位样式

其余 props 透传至 reka-ui DialogContentProps。

Slots

插槽	作用域	说明
default (Drawer)	—	通常包含 Trigger 与 Content
default (DrawerTrigger)	—	触发元素;可用 as-child 包裹自定义按钮
default (DrawerContent)	—	抽屉面板内容
default (DrawerClose)	—	关闭按钮内容

可访问性

• 基于 vaul-vue + reka-ui,自动管理焦点陷阱与键盘导航
• Esc 关闭、拖动抽屉边缘可关闭(移动端)
• modal=true(默认)会锁定 body 滚动并拦截背景交互