Drawer 抽屉

基于 Element Plus Drawer 的封装组件，提供组合式函数 useDrawer，支持完全独立使用，无需在模板中添加组件。

基础用法

useDrawer 组合式函数完全独立使用，抽屉自动渲染到 DOM，无需在模板中添加任何组件。

content 属性

content 属性支持多种类型：字符串、VNode、组件、渲染函数。渲染函数通过闭包访问响应式状态，不接收 instance 参数。

插槽使用

使用 slots 属性自定义抽屉的头部、内容、底部等区域。所有插槽函数通过闭包访问响应式状态，不接收 instance 参数。slots.default 优先级高于 content 属性。

抽屉 Loading

通过 instance.loading.value = true/false 控制抽屉 loading 状态，loading 遮罩层只作用在抽屉内容区域，不是整个抽屉。

自定义 Loading 配置

通过 loadingProps 自定义 el-loading 配置，保持与 el-loading 原生行为一致。

size 控制

通过 size 属性控制抽屉的大小，支持固定像素值（如 300px、500px）和百分比值（如 50%）。抽屉的高度通过 size 属性控制，内容区域使用原生滚动，当内容超出时自动显示滚动条。

按钮 Loading

通过 buttonLoadings 或快捷方式 confirmLoading、cancelLoading 控制按钮级别的 loading 状态。

el-drawer 原生功能

useDrawer 完全支持 el-drawer 的所有原生属性、事件和插槽，直接透传，无需额外配置。

生命周期钩子

useDrawer 支持 ElDrawer 的原生属性 beforeClose 和事件 @opened、@closed，支持异步操作。

数据共享

在 onOpened 中获取的数据可以通过响应式变量在 default、header、footer 等插槽中共享使用。所有插槽的渲染函数都通过闭包访问响应式状态。

全局配置

通过 useDrawer(globalConfig) 传入全局配置，所有 drawer.use() 创建的实例都会继承全局配置，实例配置会覆盖全局配置。

多个抽屉实例

支持创建多个抽屉实例，自动管理 z-index（通过 DrawerStack 自动分配和更新）。

API

组合式函数

useDrawer

useDrawer(globalConfig?)

创建抽屉实例管理器，支持全局配置。

参数：

参数	说明	类型	默认值
globalConfig	页面级别的全局配置，会被所有 drawer.use() 创建的实例继承	DrawerGlobalConfig	-

返回值：

• UseDrawerReturn：包含 use 方法的对象

drawer.use(options)

创建抽屉实例。

参数：

参数	说明	类型	默认值
options	抽屉选项，会继承 useDrawer() 传入的全局配置	DrawerOptions	-

返回值：

• DrawerInstance：抽屉实例，包含 modelValue、loading、buttonLoadings 等响应式状态

DrawerOptions

支持 ElDrawer 的所有属性（包括 beforeClose、@opened、@closed 等生命周期钩子）。

拓展属性：

参数	说明	类型	默认值
content	内容（支持字符串、VNode、组件、渲染函数）	string | VNode | Component | (() => string | Component | VNode)	-
loadingProps	el-loading 的属性配置	Partial<ElLoadingOptions>	-
slots	插槽（header、footer、title、default）	{ default?: () => VNode, header?: () => VNode, footer?: () => VNode, title?: () => VNode }	-
onConfirm	确认按钮钩子（可选）	() => void | Promise<void>	-
onCancel	取消按钮钩子（可选）	() => void	-
loading	抽屉 loading 状态（可选，如果传入则使用用户的，否则使用内部的）	Ref<boolean>	-
buttonLoadings	按钮 loading 状态（可选，如果传入则使用用户的，否则使用内部的）	Ref<Record<string, boolean>>	-

注意：

• 生命周期钩子（beforeClose、@opened、@closed）直接使用 ElDrawer 的原生支持，无需额外定义
• @opened 和 @closed 事件不接收 instance 参数，通过闭包访问响应式状态
• content 和 slots 的渲染函数通过闭包访问（从 drawer.use() 解构的变量），不接收 instance 参数
• slots.default 优先级高于 content 属性
• 抽屉的大小通过 size 属性控制，内容区域使用原生滚动，当内容超出时自动显示滚动条

DrawerInstance

属性	说明	类型
id	唯一标识符	string
modelValue	v-model 绑定的响应式值（唯一控制方式）	Ref<boolean>
loading	抽屉加载状态（自动显示遮罩层）	Ref<boolean>
buttonLoadings	统一的按钮 loading 管理（响应式）	Ref<Record<string, boolean>>
confirmLoading	确认按钮 loading（快捷方式，计算属性）	WritableComputedRef<boolean>
cancelLoading	取消按钮 loading（快捷方式，计算属性）	WritableComputedRef<boolean>

DrawerGlobalConfig

支持 ElDrawer 所有的属性。

拓展属性：

参数	说明	类型	默认值
loadingProps	el-loading 的属性配置（全局配置）	Partial<ElLoadingOptions>	-