Dropdown

Компонент Dropdown используется для создания выпадающих меню с возможностью выбора элементов. В основе работы лежит комбинация el-dropdown как контейнера и el-dropdown-menu с el-dropdown-item для списка опций.

Простейший пример:

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      Меню<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>Опция 1</el-dropdown-item>
      <el-dropdown-item>Опция 2</el-dropdown-item>
      <el-dropdown-item>Опция 3</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

Ключевые моменты:

  • el-dropdown – контейнер, на который навешиваются события клика и отображения.
  • el-dropdown-menu – список выпадающих элементов.
  • el-dropdown-item – отдельный пункт меню. Можно добавлять disabled для неактивных элементов.

События и взаимодействие

Dropdown поддерживает несколько событий:

  • command – срабатывает при выборе пункта меню, возвращает значение атрибута command элемента.
  • visible-change – срабатывает при открытии/закрытии меню, передает булево значение.

Пример использования события command:

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    Выберите действие<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="edit">Редактировать</el-dropdown-item>
    <el-dropdown-item command="delete">Удалить</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<script>
export default {
  methods: {
    handleCommand(command) {
      if (command === 'edit') {
        console.log('Редактирование');
      } else if (command === 'delete') {
        console.log('Удаление');
      }
    }
  }
}
</script>

Настройка направления открытия

По умолчанию меню открывается вниз. Можно управлять направлением через атрибут placement:

  • bottom-start – вниз, слева
  • bottom-end – вниз, справа
  • top-start – вверх, слева
  • top-end – вверх, справа

Пример:

<el-dropdown placement="top-end">
  <span class="el-dropdown-link">
    Другое меню<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>Вверх вправо</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

Разделители и заголовки

Для удобства интерфейса можно использовать el-dropdown-item с атрибутом divided для визуального разделителя, а также el-dropdown-item с кастомной разметкой для заголовков.

<el-dropdown>
  <span class="el-dropdown-link">
    Меню с разделителями<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>Опция 1</el-dropdown-item>
    <el-dropdown-item divided>Опция 2</el-dropdown-item>
    <el-dropdown-item disabled>Неактивная опция</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

Группировка элементов

Для сложных меню применяется группировка через el-dropdown-item-group. Это позволяет логически объединять пункты меню и облегчает визуальное восприятие.

<el-dropdown>
  <span class="el-dropdown-link">
    Группированное меню<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item-group>
      <el-dropdown-item command="1">Группа 1 – Опция 1</el-dropdown-item>
      <el-dropdown-item command="2">Группа 1 – Опция 2</el-dropdown-item>
    </el-dropdown-item-group>
    <el-dropdown-item-group>
      <el-dropdown-item command="3">Группа 2 – Опция 1</el-dropdown-item>
      <el-dropdown-item command="4">Группа 2 – Опция 2</el-dropdown-item>
    </el-dropdown-item-group>
  </el-dropdown-menu>
</el-dropdown>

Использование с динамическими данными

Dropdown удобно комбинировать с массивами данных для динамической генерации пунктов:

<el-dropdown @command="selectItem">
  <span class="el-dropdown-link">
    Динамическое меню<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item
      v-for="item in menuItems"
      :key="item.id"
      :command="item.action"
    >
      {{ item.name }}
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: 'Пункт A', action: 'a' },
        { id: 2, name: 'Пункт B', action: 'b' },
        { id: 3, name: 'Пункт C', action: 'c' }
      ]
    };
  },
  methods: {
    selectItem(action) {
      console.log('Выбрано действие:', action);
    }
  }
}
</script>

Дополнительные возможности

  • Split Button Dropdown – кнопка с разделением действий и выпадающего меню через <el-dropdown-button>.
  • Trigger на hover – можно открывать меню при наведении с помощью атрибута trigger="hover".
  • Custom content – в качестве пункта меню можно вставлять любую разметку, включая иконки, аватары или изображения.
<el-dropdown trigger="hover">
  <el-button>
    Меню при наведении<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>
      <i class="el-icon-edit"></i> Редактировать
    </el-dropdown-item>
    <el-dropdown-item>
      <i class="el-icon-delete"></i> Удалить
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

Эти возможности делают Dropdown универсальным инструментом для создания интерактивных меню, поддерживающих как простые списки, так и сложные динамические интерфейсы.

Оглавление