双端兼容 · 桌面 + 移动
Drawer 抽屉
移动端：侧滑抽屉改为
direction="btt"底部面板，参见 移动端 · 反馈与浮层。
从屏幕边缘滑出的浮层面板，适合承载表单、详情等大块内容。支持四个方向滑入、自定义尺寸、焦点圈禁与滚动锁定，通过 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
Drawer Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 显示控制 | boolean | false |
| title | 标题（header 插槽优先） | string | |
| direction | 滑出方向 | ltr | rtl | ttb | btt | rtl |
| size | 尺寸，水平为宽度、垂直为高度，数字按 px | string | number | 30% |
| with-header | 是否显示标题区 | boolean | true |
| show-close | 是否显示关闭按钮 | boolean | true |
| destroy-on-close | 关闭后销毁内容 | boolean | false |
| append-to-body | 挂载到 body | boolean | true |
| modal | 遮罩模式（false 时点击遮罩不关闭） | boolean | true |
| close-on-click-modal | 点击遮罩关闭 | boolean | true |
| close-on-press-escape | ESC 关闭 | boolean | true |
| lock-scroll | 打开时锁定页面滚动 | boolean | true |
| glass | 面板磨砂玻璃质感；缺省跟随全局（EbConfigProvider 的 glass） | boolean | — |
| blur | 面板磨砂模糊半径（px），仅磨砂生效时应用；缺省跟随 --eb-glass-blur 令牌（14px） | number | string | — |
| before-close | 关闭前拦截，调用 done() 完成关闭 | (done) => void | — |
Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 抽屉内容，destroy-on-close 时随关闭销毁 | — | — |
| header | 替换整个标题区 | — | — |
| footer | 底部操作区，未提供时不渲染 | — | — |
Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update:modelValue | 显隐受控更新 | (v: boolean) => void | — |
| open | 打开前触发 | () => void | — |
| opened | 打开动画结束后触发 | () => void | — |
| close | 开始关闭时触发 | () => void | — |
| closed | 关闭动画结束后触发 | () => void | — |
Exposes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 当前显示状态 | boolean | — |
| handleClose | 触发关闭（走 before-close 拦截流程） | () => void | — |
| ref | 抽屉面板根 DOM 元素（焦点圈禁容器） | HTMLElement | — |