Drawer для боковых панелей

Компонент Drawer в Element Plus используется для создания боковых панелей, которые выезжают поверх основного содержимого. Он позволяет реализовать интерфейсы с дополнительной информацией, настройками или формами, не перегружая основной экран. Drawer может появляться с любой стороны окна: слева, справа, сверху или снизу, с возможностью настраивать размеры и поведение закрытия.

Основные свойства:

  • model-value – управляет видимостью панели (true/false).
  • title – заголовок панели.
  • size – ширина или высота панели (может быть задана в px или %).
  • direction – направление появления: ltr (по умолчанию слева направо), rtl, ttb (сверху вниз), btt (снизу вверх).
  • with-header – отображение заголовка панели.
  • destroy-on-close – удалять содержимое после закрытия (экономит память при сложных компонентах).
  • modal – затемнение заднего фона (по умолчанию true).
  • lock-scroll – блокировка прокрутки основного контента при открытой панели.

Пример базового использования

<template>
  <el-button @click="drawerVisible = true">Открыть панель</el-button>

  <el-drawer
    v-model="drawerVisible"
    title="Настройки"
    size="30%"
    direction="rtl"
  >
    <p>Содержимое боковой панели</p>
    <el-button @click="drawerVisible = false">Закрыть</el-button>
  </el-drawer>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const drawerVisible = ref(false)
    return { drawerVisible }
  }
}
</script>

В этом примере кнопка управляет состоянием видимости панели через v-model. Панель выезжает справа, занимает 30% ширины экрана и имеет заголовок «Настройки».

Управление размерами и адаптивность

Drawer поддерживает динамическую настройку размеров:

  • size="50%" – пол экрана.
  • size="400px" – фиксированная ширина.
  • Возможна комбинация с CSS-переменными для адаптивности:
<el-drawer
  v-model="drawerVisible"
  :size="drawerWidth"
>
  <p>Контент адаптивной панели</p>
</el-drawer>

<script>
const drawerWidth = ref(window.innerWidth > 1200 ? '30%' : '80%')

window.addEventListener('resize', () => {
  drawerWidth.value = window.innerWidth > 1200 ? '30%' : '80%'
})
</script>

События компонента

Drawer предоставляет несколько полезных событий для управления жизненным циклом панели:

  • open – срабатывает при открытии панели.
  • opened – после завершения анимации открытия.
  • close – при попытке закрытия панели (можно предотвратить).
  • closed – после полной анимации закрытия.

Пример использования события close для проверки условий перед закрытием:

<el-drawer
  v-model="drawerVisible"
  title="Проверка перед закрытием"
  @close="handleClose"
>
  <p>Форма или данные</p>
</el-drawer>

<script>
const drawerVisible = ref(false)

function handleClose(done) {
  if(confirm('Вы действительно хотите закрыть панель?')) {
    done()
  }
}
</script>

Использование вложенных компонентов

Drawer хорошо сочетается с другими компонентами Element Plus: формами, таблицами, вкладками. Пример с формой внутри боковой панели:

<el-drawer v-model="drawerVisible" title="Форма пользователя">
  <el-form :model="form">
    <el-form-item label="Имя">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="Email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">Сохранить</el-button>
  </el-form>
</el-drawer>

<script>
import { reactive, ref } from 'vue'

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

function submitForm() {
  console.log('Данные формы:', form)
  drawerVisible.value = false
}
</script>

Анимации и стилизация

Drawer поддерживает кастомизацию через CSS и слоты. Например, можно изменить цвет заголовка или добавить иконку закрытия:

<el-drawer
  v-model="drawerVisible"
  title="Панель с иконкой"
  custom-class="custom-drawer"
>
  <template #header>
    <span>Особый заголовок</span>
    <el-button @click="drawerVisible = false" icon="el-icon-close"></el-button>
  </template>
  <p>Контент панели</p>
</el-drawer>

<style>
.custom-drawer .el-drawer__header {
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
}
</style>

Многоуровневые панели и вложенные Drawer

В интерфейсах, где необходимо открывать несколько уровней боковых панелей, Drawer позволяет использовать вложенные панели, каждая со своим состоянием v-model. Важно правильно управлять z-index и размерами, чтобы панели не перекрывали критически важные элементы интерфейса.

<el-drawer v-model="outerDrawer">
  <p>Внешняя панель</p>
  <el-button @click="innerDrawer = true">Открыть вложенную панель</el-button>

  <el-drawer v-model="innerDrawer" size="50%">
    <p>Вложенная панель</p>
  </el-drawer>
</el-drawer>

Практические рекомендации

  • Использовать destroy-on-close для сложных форм, чтобы сбрасывать состояние при закрытии.
  • Блокировать прокрутку основного контента через lock-scroll.
  • Комбинировать с teleport для корректного рендеринга в определённой области DOM.
  • Настраивать direction в зависимости от UX — для настроек обычно справа, для навигации слева.

Drawer в Element Plus является мощным инструментом для построения динамичных интерфейсов с выезжающими панелями, позволяя гибко управлять содержимым, анимациями и взаимодействием с пользователем.

Оглавление