Combobox

Combobox info coming soon

Применение

With Combobox, you can allow a user to create new values that may not be present in a provided items list.

API

v-combobox
Имя
allow-overflow
По умолчанию
true
Тип
boolean

Components.Combobox.

Имя
append-icon
По умолчанию
'$vuetify.icons.dropdown'
Тип
string

Components.Combobox.

Имя
append-outer-icon New in — v1.1
По умолчанию
undefined
Тип
string

Components.Combobox.

Имя
attach
По умолчанию
false
Тип
any

Указывает, какой элемент DOM должен отделить этот компонент. Используйте либо селектор CSS, либо ссылку на объект для элемента.

Имя
auto-select-first
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
autofocus
По умолчанию
false
Тип
boolean

Включить автофокусировку

Имя
background-color
По умолчанию
undefined
Тип
string

Components.Combobox.

Имя
box
По умолчанию
false
Тип
boolean

Применяет стиль ввода альтернативного ввода

Имя
browser-autocomplete
По умолчанию
'off'
Тип
string

Components.Combobox.

Имя
cache-items
По умолчанию
false
Тип
boolean

Сохраняет локальную копию всех элементов, прошедших через свойство items.

Имя
chips
По умолчанию
false
Тип
boolean

Изменяет отображение выбранных chips

Имя
clear-icon
По умолчанию
'$vuetify.icons.clear'
Тип
string

Components.Combobox.

Имя
clearable
По умолчанию
false
Тип
boolean

Добавить функциональные возможности ввода, значок по умолчанию - Material Icons *clear

Имя
color
По умолчанию
'primary'
Тип
string

Применяет заданный цвет к элементу управления

Имя
counter
По умолчанию
undefined
Тип
boolean | number | string

Создаёт счётчик для входной длины. Если номер не указан, по умолчанию он равен 25. Не применяется какая-либо проверка.

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
deletable-chips
По умолчанию
false
Тип
boolean

Добавляет значок удаления в выбранный chips

Имя
dense
По умолчанию
false
Тип
boolean

Уменьшает максимальную высоту элементов списка

Имя
disabled
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
dont-fill-mask-blanks
По умолчанию
false
Тип
boolean

Отключает автоматическое отображение символов при наборе текста

Имя
error
По умолчанию
false
Тип
boolean

Вставляет состояние ошибки в ввод вручную

Имя
error-count
По умолчанию
1
Тип
number | string

Components.Combobox.

Имя
error-messages
По умолчанию
[]
Тип
string | array

Вставляет состояние ошибки в ввод и передаёт пользовательские сообщения об ошибках. Будет сочетаться с любыми валидациями, которые возникают из rules. Это поле не инициирует проверку

Имя
filter
По умолчанию
(item: object, queryText: string, itemText: string) => boolean
Тип
function

Components.Combobox.

Имя
flat
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
full-width
По умолчанию
false
Тип
boolean

Сбрасывает тип ввода как полную ширину

Имя
height
По умолчанию
undefined
Тип
number | string

Установка высоты компонента

Имя
hide-details
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
hide-no-data
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
hide-selected
По умолчанию
false
Тип
boolean

Не отображать в элементах select , которые уже выбраны

Имя
hint
По умолчанию
undefined
Тип
string

Components.Combobox.

Имя
item-avatar
По умолчанию
avatar
Тип
string | array | function

Установить свойству items значение аватара

Имя
item-disabled
По умолчанию
disabled
Тип
string | array | function

Установить свойству items отключено

Имя
item-text
По умолчанию
text
Тип
string | array | function

Установить свойству items значение text

Имя
item-value
По умолчанию
value
Тип
string | array | function

Установить свойству items значение

Имя
items
По умолчанию
[]
Тип
array

Может быть массив объектов или массив строк. При использовании объектов будет искать поле текста и значения. Это можно изменить с помощью item-text и item-value свойств.

Имя
label
По умолчанию
undefined
Тип
string

Components.Combobox.

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
loading
По умолчанию
false
Тип
boolean | string

Components.Combobox.

Имя
mask
По умолчанию
undefined
Тип
object | string

Примените специальную маску на вход. Для получения дополнительной информации см. Таблицу масок выше

Имя
menu-props New in — v1.2
По умолчанию
{"closeOnClick":false, "closeOnContentClick":false, "openOnClick":false, "maxHeight":300}
Тип
string | array | object

Components.Combobox.

Имя
messages
По умолчанию
[]
Тип
string | array

Components.Combobox.

Имя
multiple
По умолчанию
false
Тип
boolean

Множественные изменения select. Принимает массив для значения

Имя
no-data-text
По умолчанию
'$vuetify.noDataText'
Тип
string

Отображать текст, когда нет данных

Имя
no-filter New in — v1.1
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
open-on-clear
По умолчанию
false
Тип
boolean

При использовании свойства clearable , после очистки, меню выбора будет либо открыто, либо оставаться открытым, в зависимости от текущего состояния

Имя
outline
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
persistent-hint
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
placeholder
По умолчанию
undefined
Тип
string

Components.Combobox.

Имя
prefix
По умолчанию
undefined
Тип
string

Отображает префиксный текст

Имя
prepend-icon
По умолчанию
undefined
Тип
string

Components.Combobox.

Имя
prepend-inner-icon New in — v1.1
По умолчанию
undefined
Тип
string

Components.Combobox.

Имя
readonly
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
return-masked-value
По умолчанию
false
Тип
boolean

Возвращает неизмененную строку в маске

Имя
return-object
По умолчанию
true
Тип
boolean

Изменяет поведение выбора, чтобы вернуть объект напрямую, а не значение, указанное с помощью значения item-value

Имя
reverse New in — v1.1
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
rules
По умолчанию
[]
Тип
array

Массив функций, возвращающих True или String с сообщением об ошибке

Имя
search-input
По умолчанию
undefined
Тип
any

При использовании свойства автозаполнения. Используйте модификатор .sync, чтобы отловить пользовательский ввод из ввода автозаполнения

Имя
single-line
По умолчанию
false
Тип
boolean

Ярлык не перемещается на фокус/dirty

Имя
small-chips New in — v1.1
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
solo
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
solo-inverted
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
success New in — v1.1
По умолчанию
false
Тип
boolean

Components.Combobox.

Имя
success-messages New in — v1.1
По умолчанию
[]
Тип
string | array

Components.Combobox.

Имя
suffix
По умолчанию
undefined
Тип
string

Отображает суффикс-текста

Имя
type
По умолчанию
'text'
Тип
string

Устанавливает тип ввода

Имя
validate-on-blur
По умолчанию
false
Тип
boolean

Задержка проверки до размытия

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Имя
value-comparator
По умолчанию
(a: any, b: any) => boolean
Тип
function

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

Дополнительный

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

Примеры

No data with chips

In this example we utilize a custom no-data slot to provide context to the user when searching / creating items.

Advanced custom options

The v-combobox improves upon the added functionality from v-select and v-autocomplete. This provides you with an expansive interface to create truly customized implementations. This example takes advantage of some more advanced features such as a custom filter algorithm, inline list editing and dynamic input items.

Multiple combobox

Previously known as tags - user is allowed to enter more than 1 value

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore