Drawer 抽屉
屏幕边缘滑出的面板。
基础用法
最简单的用法，从右侧滑出。
自定义方向
支持 top、right、bottom、left 四个方向。
自定义尺寸
可以通过 size 属性控制宽度或高度。
亚克力玻璃态
开启 glass 属性，享受旗舰级的视觉体验。
可调节大小
开启 resizable 属性，允许用户通过拖拽边缘来调整抽屉尺寸。
带页脚的操作
通过 show-footer 和 footer 插槽添加操作按钮。
嵌套抽屉
Drawer 组件支持多级嵌套，通过 z-index 自动管理确保内层抽屉始终覆盖在外层之上。
局部容器弹出 (Inner Mode)
开启 inner 属性，抽屉将以 absolute 方式渲染在最近的 relative 父容器内。支持所有个方向，且自动禁用 Teleport 以确保层级正确。
自定义关闭图标
通过 close-icon 插槽，您可以完全自定义右上角的关闭触发区域。
禁用圆角 (直角风格)
默认开启圆角（旗舰审美），通过 round 属性可快速切换为硬朗的直角风格。
遮罩层 (Modal)
通过 modal 属性可以开启或关闭背景遮罩层。
在 Nuxt 中使用
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue / v-model | 是否显示抽屉 | boolean | false |
| title | 标题 | string | (() => VNode) | Component | - |
| placement | 抽屉位置 | 'top' | 'right' | 'bottom' | 'left' | 'right' |
| size | 抽屉大小 (宽度或高度) | string | number | '30%' |
| modal | 是否显示遮罩层 | boolean | true |
| closeOnClickModal | 点击遮罩层是否关闭 | boolean | true |
| closeOnPressEscape | 按下 ESC 是否关闭 | boolean | true |
| showClose | 是否显示关闭按钮 | boolean | true |
| closeIcon | 自定义关闭图标名称 | string | 'close' |
| showHeader | 是否显示头部 | boolean | true |
| showFooter | 是否显示页脚 | boolean | false |
| lockScroll | 是否锁定视口滚动 | boolean | true |
| glass | 是否开启亚克力玻璃模式 | boolean | false |
| resizable | 是否可调整大小 | boolean | false |
| minSize | 最小大小 (px) | number | 150 |
| maxSize | 最大大小 (px) | number | 1000 |
| destroyOnClose | 关闭时是否销毁内容 | boolean | false |
| zIndex | 手动设置 z-index 层级 | number | - |
| teleportTo | 挂载节点 | string | HTMLElement | 'body' |
| beforeClose | 关闭前的钩子，执行 done 才会关闭 | (done: () => void) => void | - |
| round | 是否显示圆角（旗舰级审美自适应） | boolean | true |
| inner | 是否在指定容器内弹出 (开启绝对定位模式) | boolean | false |
| customClass | 抽屉容器附加类名 | string | - |
| modalClass | 遮罩层附加类名 | string | - |
| titleStyle | 头部标题自定义样式 | CSSProperties | string | - |
| contentStyle | 内容主体自定义样式 | CSSProperties | string | - |
| footerStyle | 页脚自定义样式 | CSSProperties | string | - |
| drawerStyle | 抽屉面板整体自定义样式 | CSSProperties | string | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| open | 面板打开时触发 | - |
| opened | 面板开启动画结束时触发 | - |
| close | 面板关闭时触发 | - |
| closed | 面板关闭动画结束时触发 | - |
| resize | 调整大小时触发 | (size: number) |
| update:modelValue | v-model 更新事件 | (value: boolean) |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 抽屉的核心内容区域 |
| header | 自定义整个头部区域 (覆盖标题和关闭按钮) |
| title | 仅自定义标题文字部分 |
| footer | 自定义页脚内容区域 |
| close-icon | 自定义关闭按钮内部图标 |
Expose
| 属性名 | 说明 | 类型 |
|---|---|---|
| drawerRef | 抽屉容器 DOM 元素引用 | HTMLElement | null |
| handleClose | 手动触发关闭流程 (支持 beforeClose 钩子) | (isClickModal?: boolean) => void |
主题变量 (CSS Variables)
组件深度集成 YH-UI 设计系统，所有颜色变量已与全局主题系统对接，自动支持暗黑模式：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-drawer-bg-color | 抽屉面板背景色 | var(--yh-bg-color-overlay) |
--yh-drawer-shadow | 抽屉阴影强度 | var(--yh-shadow-lg) |
--yh-drawer-title-color | 标题文本颜色 | var(--yh-text-color-primary) |
--yh-drawer-border-color | 分割线/边框颜色 | var(--yh-border-color-lighter) |
--yh-drawer-header-height | 头部高度 | 56px |
--yh-drawer-footer-height | 底部高度 | 60px |
--yh-drawer-padding | 内容区内边距 | 20px |
--yh-drawer-radius | 圆角大小 | var(--yh-radius-xl) |
--yh-drawer-transition | 动画持续时间 | var(--yh-transition-duration) |