Компонент Combobox — это выпадающий список с поиском (combobox). Поддерживает одиночный и множественный выбор, нечёткий поиск через Fuse.js, подсветку совпадений и автоматическое позиционирование выпадающей панели.
- Основное назначение: выбор одного или нескольких значений из списка с возможностью поиска.
- Ключевые возможности:
- Одиночный (
multiple: false) и множественный (multiple: true) выбор. - Нечёткий поиск через Fuse.js.
- Подсветка совпадений в результатах поиска.
- Настройка полей для поиска (
searchFields). - Кастомное отображаемое поле (
displayField). - Плейсхолдер.
- Закрытие по клику вне компонента.
- Анимация появления/скрытия выпадающей панели.
- Метка (
label) и сообщение об ошибке.
| Проп | Тип | По умолчанию | Описание |
|---|
modelValue | Object | Array | [] | Выбранное значение. При multiple: true — массив объектов. |
data | Array | [] | Массив объектов-опций для выбора и поиска. |
multiple | Boolean | false | Включает режим множественного выбора. |
placeholder | String | | Текст-заполнитель поля ввода. |
label | String | | Текст метки над полем. |
displayField | String | 'label' | Ключ в объекте опции, значение которого отображается в поле и списке. |
searchFields | Array | [] | Ключи полей объектов data, по которым выполняется поиск. Если пуст, поиск отключён. |
highlight | Boolean | false | Включает подсветку совпадений в выпадающем списке. |
error | Boolean | String | false | Сообщение об ошибке. Если строка — отображается под полем. |
className | String | | Дополнительные CSS-классы. |
classNames | Object | {} | Объект для кастомизации внутренних классов. Ключи: root, error. |
inputProps | Object | {} | Дополнительные атрибуты для поля ввода. |
rootProps | Object | {} | Дополнительные атрибуты для корневого элемента. |
| Событие | Параметр | Описание |
|---|
update:modelValue | Object | Array | Вызывается при изменении выбранного значения. |
