element-plus-drawer

name	element-plus-drawer
description	Element Plus Drawer component (el-drawer) API documentation. Triggers when user wants to use, implement, or asks about el-drawer or Drawer component.

Drawer 组件 API

Attributes

Name	Description	Type	Default
model-value / v-model	Should Drawer be displayed	^[boolean]	false
append-to-body	Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to true	^[boolean]	false
append-to ^(2.8.0)	which element the Drawer appends to. Will override append-to-body	^[CSSSelector] / ^[HTMLElement]	body
lock-scroll	whether scroll of body is disabled while Drawer is displayed	^[boolean]	true
before-close	If set, closing procedure will be halted	^[Function](done: (cancel?: boolean) => void) => void(done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure)	—
close-on-click-modal	whether the Drawer can be closed by clicking the mask	^[boolean]	true
close-on-press-escape	Indicates whether Drawer can be closed by pressing ESC	^[boolean]	true
open-delay	Time(milliseconds) before open	^[number]	0
close-delay	Time(milliseconds) before close	^[number]	0
destroy-on-close	Indicates whether children should be destroyed after Drawer closed	^[boolean]	false
modal	Should show shadowing layer	^[boolean]	true
modal-penetrable ^(2.11.7)	whether the mask is penetrable. The modal attribute must be false.	^[boolean]	false
direction	Drawer's opening direction	^[enum]'rtl' | 'ltr' | 'ttb' | 'btt'	rtl
resizable ^(2.11.0)	enable resizable feature for Drawer	^[boolean]	false
show-close	Should show close button at the top right of Drawer	^[boolean]	true
size	Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is number type, it describes the size by unit of pixels; when size is string type, it should be used with x% notation, other wise it will be interpreted to pixel unit	^[number] / ^[string]	30%
title	Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form	^[string]	—
with-header	Flag that controls the header section's existence, default to true, when withHeader set to false, both title attribute and title slot won't work	^[boolean]	true
modal-class	Extra class names for shadowing layer	^[string]	—
header-class ^(2.9.3)	custom class names for header wrapper	^[string]	—
body-class ^(2.9.3)	custom class names for body wrapper	^[string]	—
footer-class ^(2.9.3)	custom class names for footer wrapper	^[string]	—
z-index	set z-index	^[number]	—
header-aria-level ^(a11y)	header's aria-level attribute	^[string]	2
custom-class ^(deprecated)	Extra class names for Drawer	^[string]	—

Events

Name	Description	Type
open	Triggered before Drawer opening animation begins	^[Function]() => void
opened	Triggered after Drawer opening animation ended	^[Function]() => void
close	Triggered before Drawer closing animation begins	^[Function]() => void
closed	Triggered after Drawer closing animation ended	^[Function]() => void
open-auto-focus	triggers after Drawer opens and content focused	^[Function]() => void
close-auto-focus	triggers after Drawer closed and content focused	^[Function]() => void
resize-start ^(2.11.8)	Triggered when resizing starts (when resizable is enabled)	^[Function](evt: MouseEvent, size: number) => void
resize ^(2.11.8)	Triggered while resizing (when resizable is enabled)	^[Function](evt: MouseEvent, size: number) => void
resize-end ^(2.11.8)	Triggered when resizing ends (when resizable is enabled)	^[Function](evt: MouseEvent, size: number) => void

Slots

Name	Description
default	Drawer's Content
header	Drawer header section; Replacing this removes the title, but does not remove the close button.
footer	Drawer footer Section
title ^(deprecated)	Works the same as the header slot. Use that instead.

Exposes

Name	Description
handleClose	In order to close Drawer, this method will call before-close.

参考

• 官方文档: https://element-plus.org/en-US/component/drawer.html