VCombobox API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| active | ||
| Controls the active state of the item. This is typically used to highlight the component. | ||
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| auto-select-first | ||
| When searching, will always highlight the first option and select it on blur. exact will only highlight and select exact matches. | ||
| autofocus | ||
| Enables autofocus. | ||
| base-color | ||
| Sets the color of the input when it is not focused. | ||
| bg-color | ||
| Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| center-affix | ||
| Vertically align appendInner, prependInner, clearIcon and label in the center. | ||
| chips | ||
| Changes display of selections to chips. | ||
| clear-icon | ||
| The icon used when the clearable prop is set to true. | ||
| clear-on-select | ||
| Reset the search text when a selection is made while using the multiple prop. | ||
| clearable | ||
| Allows for the component to be cleared. | ||
| closable-chips | ||
| Enables the closable prop on all v-chip components. | ||
| close-text | ||
| Text set to to the inputs aria-label and title when input menu is closed. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| counter | ||
| Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. | ||
| counter-value | ||
| Function returns the counter display text. | ||
| custom-filter | ||
| Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted. | ||
| custom-key-filter | ||
| Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified. | ||
| delimiters | ||
| Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys. | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| direction | ||
| Changes the direction of the input. | ||
| disabled | ||
| Removes the ability to click or target the input. | ||
| eager | ||
| Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. | ||
| error | ||
| Puts the input in a manual error state. | ||
| error-messages | ||
| 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. | ||
| filter-keys | ||
| Array of specific keys to filter on the item. | ||
| filter-mode | ||
| Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. some: There is at least one match from either the custom filter or the custom key filter. every: All columns match either the custom filter or the custom key filter. union: There is at least one match from the custom filter, or all columns match the custom key filters. intersection: There is at least one match from the custom filter, and all columns match the custom key filters. | ||
| flat | ||
| Removes box shadow when using a variant with elevation. | ||
| focused | ||
| Forces a focused state styling on the component. | ||
| hide-details | ||
| 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. | ||
| hide-no-data | ||
| Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the items array changes if not already open. | ||
| hide-selected | ||
| Do not display in the select menu items that are already selected. | ||
| hide-spin-buttons | ||
| Hides spin buttons on the input when type is set to number. | ||
| hint | ||
| Displays hint text below the input when focused. Force this always open with the persistent-hint property. | ||
| id | ||
| Sets the DOM id on the component. | ||
| item-children | ||
| This property currently has no effect. | ||
| item-color | ||
| Sets color of selected items. | ||
| item-props | ||
| Props object that will be applied to each item component. true will treat the original object as raw props and pass it directly to the component. | ||
| item-title | ||
| Property on supplied items that contains its title. | ||
| item-value | ||
| Property on supplied items that contains its value. | ||
| items | ||
| Can be an array of objects or strings. By default objects should have title and value properties, and can optionally have a props property containing any VListItem props . Keys to use for these can be changed with the item-title, item-value, and item-props props. | ||
| label | ||
| Sets the text of the v-label or v-field-label component. | ||
| list-props | ||
| Pass props through to the v-list component. Accepts an object with anything from v-list props, camelCase keys are recommended. | ||
| loading | ||
| Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color. | ||
| max-errors | ||
| Control the maximum number of shown errors from validation. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| menu | ||
| Renders with the menu open by default. | ||
| menu-icon | ||
| Sets the the spin icon. | ||
| menu-props | ||
| Pass props through to the v-menu component. Accepts an object with anything from v-menu props, camelCase keys are recommended. | ||
| messages | ||
| Displays a list of messages or a single message if using a string. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| multiple | ||
| Changes select to multiple. Accepts array for value. | ||
| name | ||
| Sets the component’s name attribute. | ||
| no-data-text | ||
| Text shown when no items are provided to the component. | ||
| no-filter | ||
| Disables all item filtering. | ||
| open-on-clear | ||
| Open’s the menu whenever the clear icon is clicked. | ||
| open-text | ||
| Text set to to the inputs aria-label and title when input menu is open. | ||
| persistent-clear | ||
| Always show the clearable icon when the input is dirty (By default it only shows on hover). | ||
| persistent-counter | ||
| Forces counter to always be visible. | ||
| persistent-hint | ||
| Forces hint to always be visible. | ||
| persistent-placeholder | ||
| Forces placeholder to always be visible. | ||
| placeholder | ||
| Sets the input’s placeholder text. | ||
| prefix | ||
| Displays prefix text. | ||
| prepend-icon | ||
| Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon. | ||
| prepend-inner-icon | ||
| Creates a v-icon component in the prepend-inner slot. | ||
| readonly | ||
| Puts input in readonly state. | ||
| return-object | ||
| Changes the selection behavior to return the object directly rather than the value specified with item-value. | ||
| reverse | ||
| Reverses the orientation. | ||
| role | ||
| The role attribute applied to the input. | ||
| rounded | ||
| Adds a border radius to the input. | ||
| rules | ||
| Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string. | ||
| single-line | ||
| Label does not move on focus/dirty. | ||
| suffix | ||
| Displays suffix text. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| transition | ||
| Sets the component transition. Can be one of the built in or custom transition. | ||
| type | ||
| Sets input type. | ||
| validate-on | ||
| Change what type of event triggers validation to run. | ||
| value-comparator | ||
| Apply a custom comparison algorithm to compare model-value and values contains in the items prop. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click:append | |
| Emitted when append icon is clicked. | |
| click:appendInner | |
| Emitted when appended inner icon is clicked. | |
| click:clear | |
| Emitted when clearable icon clicked. | |
| click:prepend | |
| Emitted when prepended icon is clicked. | |
| click:prependInner | |
| Emitted when prepended inner icon is clicked. | |
| update:focused | |
| Emitted when the input is focused or blurred | |
| update:menu | |
| Event that is emitted when the component’s menu state changes. | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
| update:search | |
| Event emitted when the search value changes. | |
插槽
| append |
| Adds an item inside the input and after input content. |
| append-inner |
| Adds an item inside the input content. |
| append-item |
| Adds an item after menu content. |
| chip |
| Slot for custom chip when using the chip prop. |
| clear |
| Slot for custom clear icon (displayed when the clearable prop is equal to true). |
| details |
| Slot for custom input details to modifying the display of messages. |
| item |
| Define a custom item appearance. The root element of this slot must be a v-list-item with v-bind="props" applied. props includes everything required for the default select list behaviour - including title, value, click handlers, virtual scrolling, and anything else that has been added with item-props. |
| label |
| The default slot of the v-label or v-field-label component. |
| loader |
| Slot for custom loader (displayed when loading prop is equal to true). |
| message |
| Slot used to customize the message content. |
| no-data |
| Defines content for when no items are provided. |
| prepend |
| Adds an item outside the input and before input content. |
| prepend-inner |
| Slot that is prepended to the input. |
| prepend-item |
| Adds an item before menu content. |
| selection |
| Define a custom selection appearance. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $combobox-chips-control-min-height | |
| $combobox-chips-margin-bottom | |
| $combobox-chips-margin-top | |
| $combobox-content-border-radius | |
| $combobox-content-elevation | |
| $combobox-focused-input | |
| $combobox-input-buffer | |
| $combobox-line-height | |
| $combobox-selection-gap | |
| $combobox-transition | |