Select fields components are used for collecting user provided information from a list of options.
When using objects for the items prop, you must associate item-text and item-value with existing properties on your objects. These values are defaulted to text and value and can be changed.
The auto property of menu-props is only supported for the default input style.
Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.
Appends an icon to the component, uses the same syntax as v-icon
Appends an icon to the outside the component's input, uses same syntax as v-icon
Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.
Включить автофокусировку
Changes the background-color of the input
Сохраняет локальную копию всех элементов, прошедших через свойство items.
Изменяет отображение выбранных chips
Applied when using clearable and the input is dirty
Добавить функциональные возможности ввода, значок по умолчанию - Material Icons *clear
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Создаёт счётчик для входной длины. Если номер не указан, по умолчанию он равен 25. Не применяется какая-либо проверка.
Applies the dark theme variant to the component. This will default the components color to white unless you've configured your application theme to dark or if you are using the color prop on the component. You can find more information on the Material Design documentation for dark themes.
Добавляет значок удаления в выбранный chips
Reduces the input height
Disables keyboard lookup
Отключает ввод
Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
Вставляет состояние ошибки в ввод вручную
The total number of errors that should display at once
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
Applies the alternate filled input style
Функция, используемая для фильтрации элементов
Удаляет элемент высоты (тень), добавляемый к элементу при использовании solo или solo-inverted
Designates input type as full-width
Sets the height of the input
Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
Не отображать в элементах select , которые уже выбраны
Hint text
Устанавливает id DOM компонента
Sets color of selected items
Установить свойству items отключено
Установить свойству items значение text
Set property of items's value - must be primitive. Dot notation is supported. Note: This is currently not supported with v-combobox GitHub Issue
Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. This can be changed using the item-text, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
{
text: string | number | object
value: string | number | object
disabled: boolean
divider: boolean
header: string
}Sets input label
Applies the light theme variant to the component.
Specifies the height of the loader
Отображение линейного прогресса бара. Может быть либо строкой, которая указывает, какой цвет применяется к индикатору выполнения (любой цвет или цвет темы - primary, secondary, success, info, warning, error) или Boolean, который использует компонент color (установленное color свойство - если он поддерживается компонентом) или основной цвет
Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"
Displays a list of messages or message if using a string
Множественные изменения select. Принимает массив для значения
Отображать текст, когда нет данных
При использовании свойства clearable , после очистки, меню выбора будет либо открыто, либо оставаться открытым, в зависимости от текущего состояния
Applies the outlined style to the input
Forces hint to always be visible
Sets the input’s placeholder text
Отображает префиксный текст
Prepends an icon to the component, uses the same syntax as v-icon
Prepends an icon inside the component's input, uses the same syntax as v-icon
Puts input in readonly state
Изменяет поведение выбора, чтобы вернуть объект напрямую, а не значение, указанное с помощью значения item-value
Reverses the input orientation
Adds a border radius to the input
Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message
Round if outlined and increase border-radius if filled. Must be used with either outlined or filled
Ярлык не перемещается на фокус/dirty
Changes display of selections to chips with the small property
Изменяет стиль ввода
Уменьшает непрозрачность элемента, пока не сфокусирован
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
Отображает суффикс-текста
Устанавливает тип ввода
Задержка проверки до размытия
The input's value
The comparison algorithm used for values. More info
Adds an item inside the input and after input content
Adds an item after menu content
Adds an item outside the input and after input content
Слот Vue по умолчанию.
Определить внешний вид элемента
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}Заменяет label по умолчанию
Customize the messages slot.
{
key: number, // the messages index
message: string, // the message
}Отображается, когда нет фильтрованных элементов
Adds an item outside the input and before input content
Adds an item inside the input and before input content
Adds an item before menu content
Слот для пользовательского линейного прогресса (отображается, когда loading prop не равна логическому False)
Определить внешний вид пользовательского выбора
{
parent: VueComponent
item: object
index: number
select: function
selected: boolean
disabled: boolean
}Emitted when the input is blurred
EventEmitted when the input is changed by user interaction
anyEmitted when input is clicked
MouseEventEmitted when appended icon is clicked
EventEmitted when appended outer icon is clicked
EventEmitted when clearable icon clicked
EventEmitted when prepended icon is clicked
EventEmitted when prepended inner icon is clicked
EventEmitted when component is focused
EventОбновлённая связанная модель
anyEmitted when any key is pressed
KeyboardEventEmitted when click is pressed
MouseEventEmitted when click is released
MouseEventThe error.sync event
booleanEmitted when menu item is selected using keyboard arrows
numberThe search-input.sync event
string0.2 !default;true !default;4px !default;68px !default;40px !default;40px !default;42px !default;0 4px 0 4px !default;5px 4px 3px 0 !default;4px 0 !default;8px 0 !default;20px !default;7px !default;.22 !default;18px !default;7px 4px 7px 0 !default;20px !default;38px !default;26px !default;Browser autocomplete is set to off by default, may vary by browser and may be ignored. MDN
Ниже приведена коллекция простых и сложных примеров.
You cannot use disabled v-select.
You cannot use read-only v-select, but it looks default.
Стандартный одиночный select имеет множество параметров конфигурации.
Используйте свою или добавленную иконку.
Multi-select может использовать v-chip для отображения выбранных элементов.
You can use dense prop to reduce the field height and lower max height of list items.
Вы можете указать конкретные свойства в вашем массиве элементов, соответствующие полям текста и значения. По умолчанию это текст и значение. В этом примере мы также используем свойство return-object, которое вернёт весь объект выбранного элемента при выборе.
Custom props can be passed directly to v-menu using menuProps prop. In this example menu is force directed to top and shifted to top.
The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.
The selection 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.
Готовы к большему? Продолжить чтение с: