Select

Компонент Select позволяет выбирать элементы из списка с возможностями темизации и кастомизации.

Базовое использование

Компонент Select используется для выбора элементов из списка. Поддерживает различные варианты настройки и расширенные возможности.

<Select v-model="selectedItem"></Select>

Элементы данных

Проп dataSelect принимает массив элементов для выбора.

Фрукты

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    v-model="selectedItem">
</Select>

Ключ выбора

Проп keySelect определяет ключ для уникальной идентификации каждого элемента в наборе данных.

<Select
    :dataSelect="[
        { id: 1, name: 'Яблоко' }, 
        { id: 2, name: 'Банан' }, 
        { id: 3, name: 'Вишня' }]"
    keySelect="id"
    v-model="selectedItem">
</Select>

Значение для отображения

Проп valueSelect определяет ключ, по которому берется отображаемое значение элемента.

<Select
    :dataSelect="[
        { id: 1, name: 'Яблоко' }, 
        { id: 2, name: 'Банан' }, 
        { id: 3, name: 'Вишня' }]"
    keySelect="id"
    valueSelect="name"
    v-model="selectedItem">
</Select>

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

Проп multiple включает возможность выбора нескольких элементов.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    multiple
    v-model="selectedItems">
</Select>

Максимум видимых элементов

Проп maxVisible устанавливает максимальное количество элементов, отображаемых в выпадающем списке.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня', 'Финик', 'Бузина']"
    :maxVisible="3"
    v-model="selectedItem">
</Select>

Кнопка закрытия для бейджей

Проп closeButtonBadge добавляет кнопку закрытия для бейджей в режиме множественного выбора.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    multiple
    closeButtonBadge
    v-model="selectedItems">
</Select>

Текст при отсутствии данных

Проп noData задает текст, который отображается при пустом списке элементов.

<Select
    :dataSelect="[]"
    noData="Фрукты отсутствуют"
    v-model="selectedItem">
</Select>

Отключение поиска

Проп noQuery отключает фильтрацию элементов по поисковому запросу.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    noQuery
    v-model="selectedItem">
</Select>

Автофокус

Проп autoFocus автоматически устанавливает фокус на поле ввода при монтировании компонента.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    autoFocus
    v-model="selectedItem">
</Select>

Проп paramsFixWindow позволяет настроить поведение позиционирования выпадающего списка.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    :paramsFixWindow="{ position: 'right', eventOpen: 'hover', eventClose: 'hover' }"
    v-model="selectedItem">
</Select>

Кастомные CSS-стили

Класс для маски текста поиска

Проп classMaskQuery позволяет применить кастомные CSS-классы к маске текста поиска.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    classMaskQuery="custom-mask-query-class"
    v-model="selectedItem">
</Select>

Класс для базового контейнера

Проп classSelect позволяет применить кастомные CSS-классы к базовому контейнеру select.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    classSelect="custom-select-class"
    v-model="selectedItem">
</Select>

Проп classSelectList позволяет применить кастомные CSS-классы к контейнеру выпадающего списка.

<Select
    :dataSelect="['Яблоко', 'Банан', 'Вишня']"
    classSelectList="custom-select-list-class"
    v-model="selectedItem">
</Select>