抽屉 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'		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		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
}