Выдвижная панель

Всплывающий слой, выдвигающийся из края экрана; подходит для второстепенных действий — просмотр деталей, фильтрация и т. п. Четыре направления, управляемые размер и поведение маски.

Выдвижная панель

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="open('right')">right справа</LhButton>
      <LhButton @click="open('left')">left слева</LhButton>
      <LhButton @click="open('top')">top сверху</LhButton>
      <LhButton @click="open('bottom')">bottom снизу</LhButton>
      <LhButton @click="openNoMask">Маска не закрывает</LhButton>
    </div>
    <LhDrawer v-model="visible" :title="title" :direction="direction" :size="size">
      <p style="margin: 0 0 8px">direction задаёт направление, size — размер (число px или строка в процентах).</p>
      <p class="demo-note">Кнопки внизу могут включать комбинации lockScroll / closeOnEsc и т. п.</p>
      <template #footer>
        <LhButton @click="visible = false">Отмена</LhButton>
        <LhButton type="primary" @click="visible = false">Сохранить</LhButton>
      </template>
    </LhDrawer>
    <LhDrawer
      v-model="noMask"
      title="Клик по маске не закрывает"
      direction="right"
      size="30%"
      :mask-closable="false"
      :show-close="true"
      :lock-scroll="true"
      :close-on-esc="false"
    >
      <p style="margin: 0">maskClosable=false и closeOnEsc=false: закрыть можно только кнопкой или значком закрытия.</p>
      <template #footer>
        <LhButton type="primary" @click="noMask = false">Закрыть</LhButton>
      </template>
    </LhDrawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    visible: false,
    noMask: false,
    title: 'Панель справа',
    direction: 'right',
    size: '360px',
  }),
  methods: {
    open(dir) {
      this.direction = dir
      this.title = `Панель ${dir}`
      this.size = dir === 'top' || dir === 'bottom' ? '30%' : '360px'
      this.visible = true
    },
    openNoMask() {
      this.noMask = true
    },
  },
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Видимость (контролируемый prop modelValue)	boolean	false
title	Заголовок	string	—
direction	Направление	'right' \| 'left' \| 'top' \| 'bottom'	'right'
size	Размер: число — px, строка поддерживает проценты	string \| number	—
maskClosable	Закрытие по клику на маску	boolean	true
showClose	Показывать кнопку закрытия	boolean	true
teleportTarget	Целевой узел монтирования всплывающего слоя (селектор или элемент; по умолчанию body; в 2.7 нет Teleport — реализовано перемещением узла)	string \| HTMLElement	—
lockScroll	Блокировка прокрутки страницы	boolean	true
closeOnEsc	Закрытие по Esc	boolean	true
themeVars	Переменные темы на уровне компонента; переопределяют конфигурацию ConfigProvider	Record<string, string>	—
bgPattern	Фоновый узор на уровне компонента; переопределяет конфигурацию ConfigProvider	string	—
sx	Сокращённая запись разметки через sx (применяется к панели)	—	—

Slots

Слот	Описание
header	Область заголовка (по умолчанию берётся из prop title)
default	Основной текст панели
footer	Область кнопок внизу