Popselect

Компонент Popselect в библиотеке Naive UI представляет собой гибкий инструмент для создания выпадающих списков с возможностью выбора одного или нескольких значений. Он сочетает в себе функциональность стандартного селекта и удобство выпадающих меню с расширенными возможностями кастомизации.

Ключевые свойства:

  • options – массив объектов, каждый из которых содержит label и value. Например:
[
  { label: 'Россия', value: 'ru' },
  { label: 'США', value: 'us' }
]
  • value – текущее выбранное значение (для одиночного выбора) или массив выбранных значений (для множественного выбора).
  • multiple – логическое значение, определяющее возможность множественного выбора.
  • placeholder – текст, отображаемый при отсутствии выбранного значения.
  • disabled – блокировка выбора.
<n-popselect
  v-model:value="selectedCountry"
  :options="countryOptions"
  placeholder="Выберите страну"
/>

Множественный выбор и теги

При использовании multiple Popselect автоматически превращается в компонент с возможностью выбора нескольких элементов. Каждый выбранный элемент отображается в виде тега, который можно удалить. Для управления отображением тегов доступны свойства:

  • max-tag-count – максимальное количество тегов, которые будут отображены, остальные скроются и будут заменены на счетчик.
  • collapse-tags – включение сворачивания тегов при превышении максимума.
  • clearable – возможность очистки всех выбранных значений одним кликом.
<n-popselect
  v-model:value="selectedFruits"
  :options="fruitOptions"
  multiple
  clearable
  :max-tag-count="3"
/>

Асинхронная загрузка данных

Popselect поддерживает динамическую подгрузку элементов через обработчик on-search. Это особенно удобно для работы с большим количеством данных или запросами к серверу.

Пример реализации:

const loadOptions = async (query) => {
  const response = await fetch(`/api/items?search=${query}`);
  const data = await response.json();
  return data.map(item => ({ label: item.name, value: item.id }));
};
<n-popselect
  v-model:value="selectedItem"
  :options="asyncOptions"
  @update:search="asyncSearch"
/>

Особенности:

  • remote – свойство, активирующее асинхронный поиск.
  • on-update:search – событие, вызываемое при вводе текста для поиска.

Кастомизация рендеринга

Popselect предоставляет возможность полностью кастомизировать отображение как элементов списка, так и выбранных значений. Для этого используются слоты:

  • label – кастомный рендеринг выбранного элемента.
  • option – кастомный рендеринг элемента списка.
  • empty – отображение, когда список пуст.
<n-popselect
  v-model:value="selectedUser"
  :options="userOptions"
>
  <template #option="{ option }">
    <div style="display:flex; align-items:center;">
      <img :src="option.avatar" style="width:24px; height:24px; border-radius:50%; margin-right:8px;">
      <span>{{ option.label }}</span>
    </div>
  </template>
</n-popselect>

Группировка опций

Для удобства можно группировать элементы, используя свойство options с вложенными объектами label и options:

const groupedOptions = [
  { label: 'Фрукты', options: [{ label: 'Яблоко', value: 'apple' }] },
  { label: 'Овощи', options: [{ label: 'Морковь', value: 'carrot' }] }
];

Popselect автоматически отображает группы с заголовками и разделителями, что улучшает визуальное восприятие больших списков.

Работа с событиями

Popselect предоставляет набор событий для отслеживания действий пользователя:

  • update:value – срабатывает при изменении выбранного значения.
  • focus / blur – события фокуса и потери фокуса.
  • search – вызывается при вводе текста для поиска.
  • clear – срабатывает при очистке выбранных значений.
<n-popselect
  v-model:value="selectedCity"
  :options="cityOptions"
  @update:value="onCityChange"
  @clear="onClear"
/>

Стилизация и темы

Popselect наследует систему тем Naive UI, что позволяет изменять цвета, размеры и отступы через глобальные настройки темы или локальные стили. Основные возможности:

  • size – задает размер компонента (small, medium, large).
  • bordered – включение/отключение рамки.
  • placement – положение выпадающего списка относительно поля (bottom-start, top-end и др.).
  • CSS-переменные --n-popselect- позволяют тонко настраивать внешний вид отдельных элементов.

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

  • Фильтрация по вводу – автоматически скрывает неподходящие элементы при включенном поиске (filterable).
  • Виртуализация списка – для оптимизации рендеринга больших массивов (virtual-scroll).
  • Состояние загрузки – индикатор загрузки элементов при асинхронном поиске (loading).
<n-popselect
  v-model:value="selectedProduct"
  :options="products"
  filterable
  loading
  virtual-scroll
/>

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

Оглавление