🌏 Translated with the assistance of DeepSeek and ChatGPT

Drawer

A dialog that pops out from the edge of the window.

When you need to display a large amount of content in a popup, this component may provide a better visual effect than Dialog. The Drawer component uses an API design similar to Dialog.

Basic Usage

visible controls whether the Drawer is shown or hidden. Passing visible puts it in controlled mode. If you don't pass it or pass undefined, it will be in uncontrolled mode; you can then use the defaultVisible prop as the default value.

Hide source code

Footer Content

show-footer controls whether the bottom area is displayed, defaulting to false. When show-footer is enabled, you can use the footer slot to provide footer content.

Hide source code

Placement

The placement prop sets where the drawer appears from.

Hide source code

Styling

As shown in the example, you can directly pass attrs like class and style which will be forwarded to the drawer container element.

Hide source code

Functional

If you have fully registered the component library, you can use the Drawer functionally in the following ways:

• window.$drawer;
• Inside a Vue component: getCurrentInstance().appContext.config.globalProperties.PixeliumVue.drawer;
• Import from @pixelium/web-vue.

When importing on demand, you can also import Drawer from @pixelium/web-vue/es.

Hide source code

API

Drawer Function

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

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

Attrs

As shown in the example above, when using it as a component, you can directly pass attrs like class and style that will be forwarded to the drawer container element.

DrawerOptions

Attribute	Type	Optional	Default	Description	Version
content	ValidContent	False		The main content of the Drawer.	0.2.0
title	ValidContent	True		The title of the Drawer.	0.2.0
footer	ValidContent	True		The footer area of the Drawer.	0.2.0
placement	'right' | 'left' | 'top' | 'down'	True	'right'	The placement where the Drawer appears.	0.2.0
closable	boolean	True	true	Whether to show the close button in the upper right corner.	0.2.0
mask	boolean	True	true	Whether to show the mask layer.	0.2.0
maskClosable	boolean	True	true	Whether clicking the mask layer closes the Drawer.	0.2.0
escToClose	boolean	True	true	Whether pressing the ESC key closes the Drawer.	0.2.0
showFooter	boolean	True	false	Whether to show the footer area of the Drawer.	0.2.0
zIndex	number	True		The z-index property of the Drawer.	0.2.0
root	string | HTMLElement	True	'body'	The root element where the Drawer is mounted.	0.2.0
maskProps	Omit<MaskProps, 'zIndex'>	True		Props for the mask layer.	0.2.0
containerProps	RestAttrs	True		Props for the Drawer container element.	0.2.0
headerProps	RestAttrs	True		Props for the Drawer header area element.	0.2.0
bodyProps	RestAttrs	True		Props for the Drawer content area element.	0.2.0
footerProps	RestAttrs	True		Props for the Drawer footer area element.	0.2.0

DrawerProps

Attribute	Type	Optional	Default	Description	Version
visible	boolean | null	True		Controls the visibility of the Drawer, controlled mode, supports v-model.	0.2.0
defaultVisible	boolean | null	True		The default visibility value of the Drawer, uncontrolled mode.	0.2.0
title	string	True	''	The title of the Drawer.	0.2.0
placement	'right' | 'left' | 'top' | 'down'	True	'right'		0.2.0
closable	boolean	True	true	Whether to show the close button in the upper right corner.	0.2.0
mask	boolean	True	true	Whether to show the mask layer.	0.2.0
maskClosable	boolean	True	true	Whether clicking the mask layer closes the Drawer.	0.2.0
escToClose	boolean	True	true	Whether pressing the ESC key closes the Drawer.	0.2.0
showFooter	boolean	True	false	Whether to show the footer area of the Drawer.	0.2.0
root	string | HTMLElement	True	'body'	The root element where the Drawer is mounted.	0.2.0
zIndex	number	True		The z-index property of the Drawer.	0.2.0
destroyOnHide	boolean	True	false	Whether the Drawer content is destroyed after hiding.	0.2.0
maskProps	Omit<MaskProps, 'zIndex'>	True		Props for the mask layer.	0.2.0
containerProps	RestAttrs	True		Props for the Drawer container element.	0.2.0
headerProps	RestAttrs	True		Props for the Drawer header area element.	0.2.0
bodyProps	RestAttrs	True		Props for the Drawer content area element.	0.2.0
footerProps	RestAttrs	True		Props for the Drawer footer area element.	0.2.0

DrawerSlots

Slot	Parameter	Description	Version
default		The main content of the Drawer.	0.2.0
title		The title of the Drawer.	0.2.0
footer		The footer area of the Drawer.	0.2.0

DrawerEvents

Event	Parameter	Description	Version
update:visible		Used to update the visible value in controlled mode.	0.2.0
exit	event: MouseEvent | KeyboardEvent		0.2.0
open		Callback when the Drawer opens.	0.2.0
afterOpen		Callback after the Drawer opening animation ends.	0.2.0
close		Callback when the Drawer closes.	0.2.0
afterClose		Callback after the Drawer closing animation ends.	0.2.0

DrawerExpose

Attribute	Type	Optional	Default	Description	Version
close	() => void	False		Closes the Drawer.	0.2.0
open	() => void	False		Opens the 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
}