Drawer 抽屉
从侧边滑出的面板，常用于筛选条件、详情信息等场景。
基础用法
右侧抽屉
从右侧滑出的面板内容，点击遮罩、关闭按钮或按 Esc 均可关闭。
左侧抽屉
左侧抽屉
状态：全部
分类：全部
排序：创建时间
禁止遮罩关闭
no-mask-close 禁止点击遮罩关闭抽屉（其他关闭入口保留）。
no-mask-close
点击遮罩不会关闭，需通过 ✕ / Esc 或底部按钮关闭。
受控显示
visible 为受控属性：由宿主（按钮 / JS）设置或移除，组件不会自动恢复；关闭后可监听 oas-ok / oas-close 后移除 visible。
受控显示（visible）
外部按钮直接设置 / 移除 visible 控制显隐，无需依赖底部按钮。
无底部按钮
无底部按钮
隐藏底部操作区，仅保留 ✕ 与 Esc 关闭入口。
事件反馈
事件反馈
点击「确定」或「取消」，观察右上角消息提示。
自定义宽度
自定义宽度
通过 width 属性指定抽屉宽度，支持 px 或百分比（如 50%），窄屏下受 max-width: 90vw 约束。
尺寸档位
尺寸档位
small 档：256px，适合窄屏辅助信息。
large 档：736px，适合复杂表单或详情场景。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
no-footer | 隐藏底部操作按钮 | boolean | — |
no-mask-close | 禁用点击遮罩关闭 | boolean | — |
placement | 滑出方向 | string | right |
size | 预设尺寸档位或具体值：small（256px）/ medium（378px）/ large（736px），或直接写如 512px、40% | — | — |
title | 标题文案 | string | — |
visible | 是否显示 | boolean | — |
width | 抽屉宽度（px 或百分比），优先级高于 size | — | — |
事件
| 事件 | 说明 |
|---|---|
oas-close | 关闭：取消按钮 / ✕ / 遮罩点击 / Esc |
oas-ok | 点击「确定」 |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |
role="dialog" + aria-modal="true"，打开时焦点移入关闭按钮，关闭后还原。