Выпадающее меню

Разворачивающееся вниз меню. Три способа вызова: наведение, клик, правый клик; пункты могут нести командный идентификатор и разделитель.

Выпадающее меню

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhDropdown placement="bottom-start" @command="onCommand">
        <LhButton>Вызов hover (по умолчанию)</LhButton>
        <template #dropdown>
          <LhDropdownItem command="copy">Копировать колофон</LhDropdownItem>
          <LhDropdownItem command="move">Переместить в свиток</LhDropdownItem>
          <LhDropdownItem divided command="delete">Удалить</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="click" placement="bottom" :max-height="180" @command="onCommand">
        <LhButton>click + maxHeight</LhButton>
        <template #dropdown>
          <LhDropdownItem v-for="i in 8" :key="i" :command="'item-' + i">Пункт {{ i }}</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="contextmenu" placement="bottom-end" @command="onCommand">
        <LhButton>Вызов правым кликом</LhButton>
        <template #dropdown>
          <LhDropdownItem command="ctx-a">Контекстное меню A</LhDropdownItem>
          <LhDropdownItem command="ctx-b" disabled>Контекстное меню B (отключено)</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
    <p class="demo-note">Команда: {{ command || '(нет)' }}</p>
    <p class="demo-note">При hideOnClick=false клик по пункту меню не сворачивает его; :visible.sync — ручное управление; flip=false — строгое позиционирование.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhDropdown :hide-on-click="false" placement="top" @command="onCommand">
        <LhButton>hideOnClick=false</LhButton>
        <template #dropdown>
          <LhDropdownItem command="keep-1">Не сворачивается после клика</LhDropdownItem>
          <LhDropdownItem command="keep-2">Второй пункт</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown :visible.sync="manual" placement="top-start" :flip="false" popper-class="my-popper">
        <LhButton @click="manual = !manual">Ручной переключатель ({{ manual ? 'вкл' : 'выкл' }})</LhButton>
        <template #dropdown>
          <LhDropdownItem command="manual-1">Пункт ручного меню</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown disabled>
        <LhButton disabled>disabled</LhButton>
        <template #dropdown>
          <LhDropdownItem command="never">Не появится</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    command: '',
    manual: false,
  }),
  methods: {
    onCommand(cmd) {
      this.command = String(cmd)
    },
  },
}
</script>

Props

Проп	Описание	Тип	По умолчанию
trigger	Способ вызова	'hover' \| 'click' \| 'contextmenu'	'hover'
placement	Позиция отображения	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'bottom'
flip	Переворачивать ли направление при нехватке места по главной оси (по умолчанию включено); при false — строго по placement с возможным переполнением окна просмотра	boolean	true
visible	Состояние отображения при ручном управлении (:visible.sync)	boolean	—
disabled	Отключено	boolean	false
hideOnClick	Автозакрытие после клика по пункту меню	boolean	true
teleportTarget	Целевой узел монтирования всплывающего слоя (селектор или элемент; по умолчанию body; в 2.7 нет Teleport — реализовано перемещением узла)	string \| HTMLElement	—
popperClass	Пользовательское имя класса всплывающего слоя	string	—
maxHeight	Максимальная высота меню	string \| number	—
themeVars	Переменные темы на уровне компонента; переопределяют конфигурацию ConfigProvider	Record<string, string>	—
bgPattern	Фоновый узор на уровне компонента; переопределяет конфигурацию ConfigProvider	string	—
sx	Сокращённая запись разметки через sx (применяется к корневому элементу триггера)	—	—

DropdownItem Props

Проп	Описание	Тип	По умолчанию
command	Командный идентификатор; выбрасывается с событием command при клике	string \| number	—
disabled	Отключено (сохраняется возможность фокуса, чтобы оставаться в дереве доступности)	boolean	false
divided	Показывать разделитель	boolean	false

Events

Событие	Описание	Параметр колбэка
command	Клик по пункту меню	command этого пункта
visible-change	Изменение состояния видимости	boolean

Slots

Слот	Описание
default	Триггер
dropdown	Содержимое меню (здесь размещаются LhDropdownItem)