Dialog does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like
terms & conditions,
Drawer has almost identical API with
Dialog, but it introduces different user experience.
Since v-model is natively supported for all components,
visible.sync has been deprecated, use
v-model="visibilityBinding" to control the visibility of the current drawer.
Callout a temporary drawer, from multiple direction
When you no longer need a title, you can remove title from drawer.
Drawer can do many diverse interaction as you wanted.
You can also have multiple layer of
Drawer just like
The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through
ref or after
open event emitted.
Drawer provides an API called
destroyOnClose, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your
mounted life cycle to be called every time the Drawer opens.
|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|
|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) (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|
|custom-class||Extra class names for Drawer||string||—||—|
|destroy-on-close||Indicates whether children should be destroyed after Drawer closed||boolean||-||false|
|modal||Should show shadowing layer||boolean||—||true|
|direction||Drawer's opening direction||Direction||rtl / ltr / ttb / btt||rtl|
|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 / string||-||'30%'|
|title||Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form||string||—||—|
|withHeader||Flag that controls the header section's existance, default to true, when withHeader set to false, both ||boolean||-||true|
|modal-class||Extra class names for shadowing layer||string||-||-|
|title||Drawer Title Section|
|handleClose||In order to close Drawer, this method will call |
|open||Triggered before Drawer opening animation begins||—|
|opened||Triggered after Drawer opening animation ended||—|
|close||Triggered before Drawer closing animation begins||—|
|closed||Triggered after Drawer closing animation ended||—|