切换主题
YDrawer
适用范围:Legacy Admin Kit / Schema(
@yoyoboot/yoyo-admin-kit、旧admin-vue)。新admin-nuxtui使用 Nuxt UI;本页不是新宿主的必经开发路线。
共用关闭接缝:close-request 提供 reason 和同步 preventDefault(),requestClose() 以 programmatic 来源请求关闭,closeDisabled 优先。initialFocus 可指定当前抽屉内的可交互目标。父级直接关闭保留权威性,不触发业务请求;标准 dirty 编辑使用 YEditorPanel。
定位 / Owner
YDrawer 是右侧任务/详情 surface,拥有 overlay lifecycle、focus restore、nested popup Escape 顺序、scroll body 与 footer composition。
Public API
v-model:opentitle/descriptionvariant:business | preference- business
size:sm | md | lg(显式选择;未传时保留既有响应式宽度) - business
allowFullscreen:显式启用全屏/还原 closeText/closeDisabledrestoreFocusTo- slots:default、
header、header-actions、tabs、actions
什么时候使用
- 需要保留背景上下文的大型详情/配置任务。
- 业务树、Feature/Permission 等长内容需要稳定滚动区。
- Preference 类窄抽屉使用
variant="preference"。
不什么时候使用
不要因为移动端而把所有 Dialog 自动改 Drawer;surface preference 是明确 Application Composition 选择,不由 viewport 偷换 interaction model。
关键交互
移动端 business/preference drawer 使用全宽;nested Select/Dropdown/Popover/Date popup 先消费 Escape;关闭后恢复触发点焦点。
尺寸与全屏只属于 business variant。preference 继续保持既有窄抽屉宽度和交互,不读取 business size,也不显示全屏动作。
Production Example
Role Permission、Feature management、Preference Drawer。
Live Workbench
Admin Vue 稳定路径:
/frontend-module-demo/component-workbench/drawer
该路径只标识 live scenario,不固化部署 Host;官方文档站与 Admin Vue 可以独立部署。
Verification / Source
packages/yoyo-admin/admin-kit/src/ui/components/drawer/YDrawer.vue- Role/Tenant browser focus/scroll evidence
- Live Component Workbench