---
url: /components/drawer.md
---
# Drawer 抽屉

> 移动端：侧滑抽屉改为 `direction="btt"` 底部面板，参见 [移动端 · 反馈与浮层](/mobile/feedback)。

从屏幕边缘滑出的浮层面板，适合承载表单、详情等大块内容。支持四个方向滑入、自定义尺寸、焦点圈禁与滚动锁定，通过 `v-model` 绑定显隐；`before-close` 可统一拦截右上角按钮 / ESC / 遮罩等所有关闭途径。

## 基础用法

默认从右侧滑入（rtl），`size` 控制面板宽度（默认 30%，数字按 px）。关闭按钮、遮罩、ESC 或 footer 按钮均可关闭。

## 四个方向

`direction` 决定滑出方向与停靠边缘，滑入滑出动画随方向变化：

* `rtl`：从右侧滑入（默认），面板停靠屏幕右缘；
* `ltr`：从左侧滑入，面板停靠屏幕左缘；
* `ttb`：从顶部下滑，面板停靠屏幕顶部，`size` 表示高度；
* `btt`：从底部上滑，面板停靠屏幕底部，`size` 表示高度。

## 尺寸

`size` 接受百分比字符串（相对视口）或数字（按 px），水平方向为宽度、垂直方向为高度。

## 拦截关闭（before-close）

`before-close` 接收 done 回调，不调用 done 则阻止本次关闭，可用于未保存提示或异步校验。

## 关闭后销毁内容

`destroy-on-close` 关闭时卸载默认插槽内容，再次打开重新渲染（表单输入等内部状态会被重置）。

## API