Menu компонент

Компонент Menu библиотеки Naive UI предназначен для построения навигационных меню с поддержкой вложенных элементов, иерархий и различных вариантов взаимодействия. Он реализован с гибкой системой props, events и slots, что позволяет создавать как простые панели навигации, так и сложные динамические структуры.

import { NMenu } from 'naive-ui'

<NMenu :options="menuOptions" />

Здесь menuOptions — массив объектов, описывающих элементы меню.

Структура опций меню

Каждый элемент меню представлен объектом со следующими основными полями:

label – текст пункта меню.
key – уникальный идентификатор элемента (важно для управления активным состоянием).
icon – иконка (можно использовать компоненты или строки).
children – массив дочерних элементов для создания вложенных меню.
disabled – логическое значение, указывающее, что элемент недоступен для выбора.
type – позволяет задать специальный тип элемента: 'divider', 'group' и т.д.

Пример структуры:

const menuOptions = [
  {
    label: 'Главная',
    key: 'home',
    icon: 'home-icon'
  },
  {
    label: 'Настройки',
    key: 'settings',
    icon: 'settings-icon',
    children: [
      {
        label: 'Профиль',
        key: 'profile'
      },
      {
        label: 'Безопасность',
        key: 'security'
      }
    ]
  },
  {
    type: 'divider',
    key: 'divider-1'
  },
  {
    label: 'Выход',
    key: 'logout',
    icon: 'logout-icon'
  }
]

Управление активными элементами

Для контроля активного состояния используется value или value-key, которые позволяют задать выбранный пункт меню. Это может быть как одиночный выбор, так и множественный, в зависимости от конфигурации menu.

<NMenu :options="menuOptions" v-model:value="activeKey" />

const activeKey = ref('home')

При изменении выбранного элемента activeKey автоматически обновляется.

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

Menu поддерживает несколько ключевых событий для взаимодействия с пользователем:

on-update:value – срабатывает при изменении активного элемента.
on-select – вызывается при клике на элемент, передает объект элемента.
on-open-change – срабатывает при открытии/закрытии вложенного меню.
on-click – позволяет обрабатывать любой клик, включая disabled элементы.

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

<NMenu
  :options="menuOptions"
  v-model:value="activeKey"
  @on-select="handleSelect"
/>

function handleSelect(option) {
  console.log('Выбран элемент:', option.label)
}

Вложенные меню и группы

Для создания вложенной навигации используется поле children. Вложенные меню автоматически сворачиваются и разворачиваются при клике. Для группировки элементов можно использовать type: ‘group’:

{
  type: 'group',
  label: 'Управление',
  key: 'management-group',
  children: [
    { label: 'Пользователи', key: 'users' },
    { label: 'Роли', key: 'roles' }
  ]
}

Divider (type: 'divider') позволяет визуально разделять секции меню.
Group (type: 'group') объединяет логически связанные элементы.

Настройка стилей и внешнего вида

Naive UI предоставляет гибкие возможности кастомизации через props и slots:

props:
- collapsed – сворачивание меню в компактный вид.
- mode – 'vertical' или 'horizontal'.
- theme – 'light' или 'dark'.
- root-indent – отступ для корневых элементов.
slots:
- icon – кастомная иконка для элемента.
- header – верхняя часть меню.
- footer – нижняя часть меню.

Пример кастомизации с иконками:

<NMenu
  :options="menuOptions"
  collapsed
  mode="vertical"
>
  <template #icon="{ option }">
    <CustomIcon :name="option.icon" />
  </template>
</NMenu>

Динамическое управление меню

Меню можно строить динамически, изменяя массив options в реальном времени. Naive UI автоматически отслеживает изменения и перерисовывает компонент.

function addMenuItem() {
  menuOptions.push({
    label: 'Новый пункт',
    key: `new-${menuOptions.length}`
  })
}

Также можно программно открывать и закрывать вложенные подменю с помощью openKeys:

<NMenu :options="menuOptions" v-model:open-keys="openKeys" />
const openKeys = ref(['settings'])

Для интеграции с Vue Router удобно использовать ключи key для навигации. В обработчике события on-select можно вызывать переход:

function handleSelect(option) {
  router.push({ name: option.key })
}

Это позволяет создавать полностью управляемые маршрутизируемые меню с сохранением состояния.