抽屉 Drawer

就像是从窗口边缘弹出的 Dialog。

当有大量内容需要用弹窗展示时，使用这个组件或许会比 Dialog 拥有更好的视觉效果。Drawer 组件采用了和 Dialog 相似的 API 设计。

基础使用

visible 控制 Drawer 的展示和隐藏，传入 visible 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultVisible 属性作为默认值。

隐藏源代码

底部内容

show-footer 控制是否展示底部区域，默认 false。开启 show-footer 后，可以通过 footer 插槽传入底部区域内容。

隐藏源代码

弹出位置

placement 属性设置弹出位置。

隐藏源代码

样式设置

就像栗子🌰所展示的那样，你可以直接传入 class 和 style 等 attrs 穿透到抽屉容器元素上。

隐藏源代码

函数式

如果你完整注册了组件库，你可以以以下方式函数式地使用 Drawer：

• window.$drawer；
• Vue 组件内： getCurrentInstance().appContext.config.globalProperties.PixeliumVue.drawer；
• 从 @pixelium/web-vue 中导入。

按需引入时，也可以从 @pixelium/web-vue/es 中导入 Drawer 使用。

隐藏源代码

API

Drawer Function

export type DrawerReturn = {
	close: () => void
}

// ...
// Drawer
{
	open: (
		options: (DrawerOptions & Omit<EmitEvent<DrawerEvents>, 'update:visible'>) | string
	) => DrawerReturn
}

Attrs

就像上面栗子所展示的那样🌰，作为组件时你可以直接传入 class 和 style 等 attrs 穿透到 Drawer 容器元素上。

DrawerOptions

属性	类型	可选	默认值	描述	版本
content	ValidContent	否		Drawer 的主体内容。	0.2.0
title	ValidContent	是		Drawer 标题。	0.2.0
footer	ValidContent	是		Drawer 底部区域。	0.2.0
placement	'right' | 'left' | 'top' | 'down'	是	'right'	Drawer 弹出位置。	0.2.0
closable	boolean	是	true	是否展示右上角关闭按钮。	0.2.0
mask	boolean	是	true	是否展示遮罩层。	0.2.0
maskClosable	boolean	是	true	点击遮罩层是否可以关闭 Drawer。	0.2.0
escToClose	boolean	是	true	是否可以按 ESC 键关闭 Drawer。	0.2.0
showFooter	boolean	是	false	是否展示 Drawer 底部区域。	0.2.0
zIndex	number	是		Drawer 的 z-index 属性。	0.2.0
root	string | HTMLElement	是	'body'	Drawer 挂载的根元素。	0.2.0
maskProps	Omit<MaskProps, 'zIndex'>	是		遮罩层的属性。	0.2.0
containerProps	RestAttrs	是		Drawer 容器元素的属性。	0.2.0
headerProps	RestAttrs	是		Drawer 头部区域元素的属性。	0.2.0
bodyProps	RestAttrs	是		Drawer 内容区域元素的属性。	0.2.0
footerProps	RestAttrs	是		Drawer 底部区域元素的属性。	0.2.0

DrawerProps

属性	类型	可选	默认值	描述	版本
visible	boolean | null	是		控制 Drawer 展示，受控模式，支持 v-model。	0.2.0
defaultVisible	boolean | null	是		控制 Drawer 展示的默认值，非受控模式。	0.2.0
title	string	是	''	Drawer 的标题。	0.2.0
placement	'right' | 'left' | 'top' | 'down'	是	'right'	Drawer 弹出位置。	0.2.0
closable	boolean	是	true	是否展示右上角关闭按钮。	0.2.0
mask	boolean	是	true	是否展示遮罩层。	0.2.0
maskClosable	boolean	是	true	点击遮罩层是否可以关闭 Drawer。	0.2.0
escToClose	boolean	是	true	是否可以按 ESC 键关闭 Drawer。	0.2.0
showFooter	boolean	是	false	是否展示 Drawer 底部区域。	0.2.0
root	string | HTMLElement	是	'body'	Drawer 挂载的根元素。	0.2.0
zIndex	number	是		Drawer 的 z-index 属性。	0.2.0
destroyOnHide	boolean	是	false	Drawer 内容是否在隐藏后销毁。	0.2.0
maskProps	Omit<MaskProps, 'zIndex'>	是		遮罩层的属性。	0.2.0
containerProps	RestAttrs	是		Drawer 容器元素的属性。	0.2.0
headerProps	RestAttrs	是		Drawer 头部区域元素的属性。	0.2.0
bodyProps	RestAttrs	是		Drawer 内容区域元素的属性。	0.2.0
footerProps	RestAttrs	是		Drawer 底部区域元素的属性。	0.2.0

DrawerSlots

插槽	参数	描述	版本
default		Drawer 的主体内容。	0.2.0
title		Drawer 的标题。	0.2.0
footer		Drawer 底部区域。	0.2.0

DrawerEvents

事件	参数	描述	版本
update:visible		用于更新受控模式的 visible 值。	0.2.0
exit	event: MouseEvent | KeyboardEvent	点击关闭入口、遮罩或按下 Esc 键请求退出 Drawer 时触发。	0.2.0
open		Drawer 打开时的回调。	0.2.0
afterOpen		Drawer 打开动画结束后的回调。	0.2.0
close		Drawer 关闭时的回调。	0.2.0
afterClose		Drawer 关闭动画结束后的回调。	0.2.0

DrawerExpose

属性	类型	可选	默认值	描述	版本
close	() => void	否		关闭 Drawer。	0.2.0
open	() => void	否		打开 Drawer。	0.2.0

ValidContent, ValidVNodeContent

export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element | null | void)
export type ValidVNodeContent = (...args: any[]) => VNode | JSX.Element

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}