El Drawer

Element Plus Drawer Component

Sometimes, Dialog does not always satisfy our requirements. Drawer has almost identical API with Dialog, but it introduces different user experience.

When to Invoke

Invoke this skill when:

• User needs a slide-out panel
• User wants to display forms in a drawer
• User needs a side navigation drawer
• User wants resizable drawer
• User asks about nested drawers

Features

• Multiple Directions: Left, right, top, bottom
• Resizable: Drag to resize drawer
• Nested Support: Multiple layers of drawers
• Customizable Size: Configurable width/height
• Modal/Modeless: With or without overlay
• Custom Header/Footer: Customizable sections

API Reference

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 | boolean | false | | append-to | Which element the Drawer appends to | CSSSelector \| HTMLElement | body | | lock-scroll | Whether scroll of body is disabled | boolean | true | | before-close | If set, closing procedure will be halted | (done) => void | — | | close-on-click-modal | Whether Drawer can be closed by clicking mask | boolean | true | | close-on-press-escape | Whether Drawer can be closed by pressing ESC | boolean | true | | open-delay | Time before open (ms) | number | 0 | | close-delay | Time before close (ms) | number | 0 | | destroy-on-close | Whether children should be destroyed after closed | boolean | false | | modal | Should show shadowing layer | boolean | true | | modal-penetrable | Whether the mask is penetrable | boolean | false | | direction | Drawer's opening direction | 'rtl' \| 'ltr' \| 'ttb' \| 'btt' | rtl | | resizable | Enable resizable feature | boolean | false | | show-close | Should show close button | boolean | true | | size | Drawer's size (width or height) | number \| string | 30% | | title | Drawer's title | string | — | | with-header | Flag that controls header section's existence | boolean | true | | modal-class | Extra class names for shadowing layer | string | — | | header-class | Custom class names for header wrapper | string | — | | body-class | Custom class names for body wrapper | string | — | | footer-class | Custom class names for footer wrapper | string | — | | z-index | Set z-index | number | — | | header-aria-level | Header's aria-level attribute | string | 2 |

Events

| Name | Description | Type | |------|-------------|------| | open | Triggered before Drawer opening animation begins | () => void | | opened | Triggered after Drawer opening animation ended | () => void | | close | Triggered before Drawer closing animation begins | () => void | | closed | Triggered after Drawer closing animation ended | () => void | | open-auto-focus | Triggers after Drawer opens and content focused | () => void | | close-auto-focus | Triggers after Drawer closed and content focused | () => void | | resize-start | Triggered when resizing starts | (evt, size) => void | | resize | Triggered while resizing | (evt, size) => void | | resize-end | Triggered when resizing ends | (evt, size) => void |

Slots

| Name | Description | |------|-------------| | default | Drawer's Content | | header | Drawer header section | | footer | Drawer footer Section |

Exposes

| Name | Description | |------|-------------| | handleClose | Close Drawer, calls before-close |

Usage Examples

Basic Usage

  Open Drawer
  
  
    Hi, there!
  

import { ref } from 'vue'

const drawer = ref(false)

No Title

  Open Drawer
  
  
    Hi, there!
  

import { ref } from 'vue'

const drawer = ref(false)

Custom Content

  Open Form Drawer
  
  
    
      
        
      
      
        
      
      
        
      
    
    
      Cancel
      Save
    
  

import { ref, reactive } from 'vue'

const drawer = ref(false)
const form = reactive({
  name: '',
  email: '',
  bio: ''
})

const saveForm = () => {
  console.log('Saving:', form)
  drawer.value = false
}

Custom Header

  
    
      
        Custom Header
        
          Close
        
      
    
    Content
  

import { ref } from 'vue'

const drawer = ref(false)

.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Multiple Directions

  From Right
  From Left
  From Top
  From Bottom
  
  
  
  
  

import { ref } from 'vue'

const drawer1 = ref(false)
const drawer2 = ref(false)
const drawer3 = ref(false)
const drawer4 = ref(false)

Resizable Drawer

  Open Resizable Drawer
  
  
    Drag the edge to resize
  

import { ref } from 'vue'

const drawer = ref(false)

const handleResize = (evt, size) => {
  console.log('New size:', size)
}

Nested Drawers

  Open Outer Drawer
  
  
    Open Inner Drawer
    
    
      This is the inner drawer
    
  

import { ref } from 'vue'

const outerDrawer = ref(false)
const innerDrawer = ref(false)

Before Close

  Open Drawer
  
  
    Are you sure you want to close?
  

import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const drawer = ref(false)

const handleClose = (done) => {
  ElMessageBox.confirm('Are you sure you want to close?')
    .then(() => {
      done()
    })
    .catch(() => {
      // Cancel close
    })
}

No Modal

  Open No Modal Drawer
  
  
    You can interact with the page behind
  

import { ref } from 'vue'

const drawer = ref(false)

Custom Size

  Open 50% Drawer
  
  
    50% width drawer
  

import { ref } from 'vue'

const drawer = ref(false)

Destroy on Close

  Open Drawer
  
  
    
  

import { ref } from 'vue'

const drawer = ref(false)

Common Issues

1. Drawer Not Closing

Check before-close function:

const handleClose = (done) => {
  // Make sure to call done() to close
  done()
}

2. Nested Drawer Positioning

Use append-to-body for nested drawers:

3. Content Not Updating

Use destroy-on-close to re-render content:

Best Practices

1. Use append-to-body: For nested drawers, always use append-to-body
2. Confirm before close: Use before-close for unsaved changes
3. Appropriate size: Set size based on content
4. Destroy on close: Use destroy-on-close for performance
5. Direction choice: Choose direction based on use case

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.