Dropdown Button

Компонент Dropdown Button в библиотеке Naive UI представляет собой комбинацию кнопки и выпадающего меню, позволяющего пользователю выбирать действия или опции из списка. Этот элемент удобно использовать для создания компактных интерфейсов с множеством связанных функций. В Naive UI он реализуется через компонент n-dropdown совместно с n-button и n-dropdown-menu.

Импорт и базовое использование

Для работы с Dropdown Button необходимо импортировать соответствующие компоненты:

import { NDropdown, NButton, NDropdownMenu, NDropdownOption } from 'naive-ui';

Базовая структура компонента выглядит следующим образом:

<NDropdown>
  <template #trigger>
    <NButton>Действия</NButton>
  </template>
  <NDropdownMenu>
    <NDropdownOption key="edit">Редактировать</NDropdownOption>
    <NDropdownOption key="delete">Удалить</NDropdownOption>
    <NDropdownOption key="share">Поделиться</NDropdownOption>
  </NDropdownMenu>
</NDropdown>
  • #trigger — слот для кнопки, по которой открывается меню.
  • NDropdownOption — отдельные пункты меню.
  • key — уникальный идентификатор для каждого пункта, используемый при обработке событий.

Настройка событий

Для реагирования на выбор пункта меню используется событие onSelect:

<NDropdown @select="handleSelect">
  <template #trigger>
    <NButton>Действия</NButton>
  </template>
  <NDropdownMenu>
    <NDropdownOption key="edit">Редактировать</NDropdownOption>
    <NDropdownOption key="delete">Удалить</NDropdownOption>
    <NDropdownOption key="share">Поделиться</NDropdownOption>
  </NDropdownMenu>
</NDropdown>

<script>
export default {
  methods: {
    handleSelect(key) {
      switch (key) {
        case 'edit':
          console.log('Редактирование элемента');
          break;
        case 'delete':
          console.log('Удаление элемента');
          break;
        case 'share':
          console.log('Поделиться элементом');
          break;
      }
    }
  }
}
</script>
  • key передается в обработчик, что позволяет легко различать выбранные действия.
  • Обработчик может быть реализован как метод Vue, так и как функция в Composition API.

Стили и размеры кнопки

Dropdown Button наследует все свойства стандартной кнопки n-button. Можно настроить размер, тип и стиль:

<NDropdown>
  <template #trigger>
    <NButton type="primary" size="large">Действия</NButton>
  </template>
  <NDropdownMenu>
    <NDropdownOption key="edit">Редактировать</NDropdownOption>
    <NDropdownOption key="delete">Удалить</NDropdownOption>
  </NDropdownMenu>
</NDropdown>
  • type — может быть default, primary, success, warning, error.
  • size — small, medium, large.
  • Можно использовать ghost и round для визуального изменения кнопки.

Позиционирование выпадающего меню

Позицию выпадающего меню регулирует атрибут placement:

<NDropdown placement="bottom-end">
  <template #trigger>
    <NButton>Меню</NButton>
  </template>
  <NDropdownMenu>
    <NDropdownOption key="option1">Опция 1</NDropdownOption>
    <NDropdownOption key="option2">Опция 2</NDropdownOption>
  </NDropdownMenu>
</NDropdown>

Возможные значения placement:

  • top-start, top, top-end
  • bottom-start, bottom, bottom-end
  • left-start, left, left-end
  • right-start, right, right-end

Это позволяет гибко управлять положением меню относительно кнопки.

Группировка пунктов и разделители

Для более сложных меню можно использовать группы и разделители:

<NDropdown>
  <template #trigger>
    <NButton>Меню</NButton>
  </template>
  <NDropdownMenu>
    <NDropdownOption key="new">Создать</NDropdownOption>
    <NDropdownOption key="open">Открыть</NDropdownOption>
    <NDropdownOptionDivider />
    <NDropdownOption key="settings">Настройки</NDropdownOption>
    <NDropdownOption key="logout">Выход</NDropdownOption>
  </NDropdownMenu>
</NDropdown>
  • NDropdownOptionDivider добавляет визуальное разделение между группами пунктов.
  • Это полезно для логического разделения действий (например, управление документом и пользовательские настройки).

Disabled состояния и условные пункты

Можно сделать отдельные пункты неактивными с помощью свойства disabled:

<NDropdownOption key="delete" disabled>Удалить</NDropdownOption>

Также пункты могут рендериться динамически на основе данных:

<NDropdownMenu>
  <NDropdownOption
    v-for="item in options"
    :key="item.key"
    :disabled="item.disabled"
  >
    {{ item.label }}
  </NDropdownOption>
</NDropdownMenu>

<script>
export default {
  data() {
    return {
      options: [
        { key: 'edit', label: 'Редактировать', disabled: false },
        { key: 'delete', label: 'Удалить', disabled: true },
      ]
    };
  }
}
</script>

Интеграция с Composition API

В Composition API можно управлять Dropdown Button с помощью реактивных данных и функций:

<script setup>
import { ref } from 'vue';
import { NDropdown, NButton, NDropdownMenu, NDropdownOption } from 'naive-ui';

const options = [
  { key: 'edit', label: 'Редактировать' },
  { key: 'delete', label: 'Удалить' }
];

function handleSelect(key) {
  console.log('Выбран пункт:', key);
}
</script>

<template>
  <NDropdown @select="handleSelect">
    <template #trigger>
      <NButton type="primary">Действия</NButton>
    </template>
    <NDropdownMenu>
      <NDropdownOption v-for="item in options" :key="item.key">{{ item.label }}</NDropdownOption>
    </NDropdownMenu>
  </NDropdown>
</template>
  • Использование реактивного массива options позволяет динамически изменять меню.
  • Событие @select обрабатывает все действия централизованно.

Анимация и открытие меню

По умолчанию меню открывается с плавной анимацией. Управлять видимостью можно через show и v-model:show:

<NDropdown v-model:show="isOpen">
  <template #trigger>
    <NButton @click="isOpen = !isOpen">Меню</NButton>
  </template>
  <NDropdownMenu>
    <NDropdownOption key="option1">Опция 1</NDropdownOption>
  </NDropdownMenu>
</NDropdown>

<script setup>
import { ref } from 'vue';

const isOpen = ref(false);
</script>
  • v-model:show позволяет программно открывать и закрывать меню.
  • Комбинация с анимацией appear и transition обеспечивает плавное раскрытие.

Особенности использования

  • Dropdown Button подходит для размещения множества связанных действий без перегруженности интерфейса.
  • Легко интегрируется с динамическими списками и Vue Router для переходов по ссылкам.
  • Можно комбинировать с иконками в NButton для более наглядного представления действия.

Такое детальное рассмотрение позволяет создавать гибкие и функциональные Dropdown Button, полностью используя возможности Naive UI.

Оглавление