Select
Поля компонента Select используются для сбора предоставленной пользователем информации из списка параметров.
API
Components.Selects.
Components.Selects.
Указывает, какой элемент DOM должен отделить этот компонент. Используйте либо селектор CSS, либо ссылку на объект для элемента.
Включить автофокусировку
Components.Selects.
Применяет стиль ввода альтернативного ввода
Установите свойство автозаполнения для поискового ввода при использовании свойства autocomplete
Сохраняет локальную копию всех элементов, прошедших через свойство items.
Изменяет отображение выбранных chips
Components.Selects.
Добавить функциональные возможности ввода, значок по умолчанию - Material Icons *clear
Применяет заданный цвет к элементу управления
Создаёт счётчик для входной длины. Если номер не указан, по умолчанию он равен 25. Не применяется какая-либо проверка.
Применяет тёмный вариант темы
Добавляет значок удаления в выбранный chips
Уменьшает максимальную высоту элементов списка
Отключает ввод
Отключает автоматическое отображение символов при наборе текста
Вставляет состояние ошибки в ввод вручную
Components.Selects.
Вставляет состояние ошибки в ввод и передаёт пользовательские сообщения об ошибках. Будет сочетаться с любыми валидациями, которые возникают из rules. Это поле не инициирует проверку
Components.Selects.
Сбрасывает тип ввода как полную ширину
Установка высоты компонента
Components.Selects.
Не отображать в элементах select , которые уже выбраны
Components.Selects.
Установить свойству items значение аватара
Установить свойству items отключено
Установить свойству items значение text
Установить свойству items значение
Может быть массив объектов или массив строк. При использовании объектов будет искать поле текста и значения. Это можно изменить с помощью item-text и item-value свойств.
Components.Selects.
Применяет светлый вариант темы
Components.Selects.
Примените специальную маску на вход. Для получения дополнительной информации см. Таблицу масок выше
Components.Selects.
Components.Selects.
Множественные изменения select. Принимает массив для значения
Отображать текст, когда нет данных
При использовании свойства clearable , после очистки, меню выбора будет либо открыто, либо оставаться открытым, в зависимости от текущего состояния
Components.Selects.
Components.Selects.
Components.Selects.
Отображает префиксный текст
Components.Selects.
Components.Selects.
Components.Selects.
Возвращает неизмененную строку в маске
Изменяет поведение выбора, чтобы вернуть объект напрямую, а не значение, указанное с помощью значения item-value
Components.Selects.
Массив функций, возвращающих True или String с сообщением об ошибке
Ярлык не перемещается на фокус/dirty
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Отображает суффикс-текста
Устанавливает тип ввода
Задержка проверки до размытия
Контроль видимости
Components.Selects.
Дополнительный
| Mask | Description |
|---|---|
| Masks | |
| # | Any digit |
| A | Any capital letter |
| a | Any small letter |
| N | Any capital alphanumeric character |
| n | Any small alphanumeric character |
| X | Any special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space |
| Pre-made | |
| credit-card | #### - #### - #### - #### |
| date-with-time | ##/##/#### ##:## |
| phone | (###) ### - #### |
| social | ###-##-#### |
| time | ##:## |
| time-with-seconds | ##:##:## |
Примеры
Светлая тема
Стандартный одиночный select имеет множество параметров конфигурации.
Иконки
Используйте свою или добавленную иконку.
Множественный select
Multi-select может использовать v-chip для отображения выбранных элементов.
Настроенный текст и значение элемента
Вы можете указать конкретные свойства в вашем массиве элементов, соответствующие полям текста и значения. По умолчанию это текст и значение. В этом примере мы также используем свойство return-object, которое вернёт весь объект выбранного элемента при выборе.
Prepend/Append item slots
The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.
Change selection appearance
The selection scoped slot can be used to customize the way selected values are shown in the input. This is great when you want something like foo (+20 others) or don't want the selection to occupy multiple lines.