VAutocomplete API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| active | ||
| 控制项的 active 状态。这通常用于高亮显示组件。 | ||
| 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 | ||
| 改变一个已选择项为小纸片（chips）的显示方式. | ||
| clear-icon | ||
| 当"可清除"属性设置为 true 时, 设置清除图标的属性. | ||
| clear-on-select | ||
| Reset the search text when a selection is made while using the multiple prop. | ||
| clearable | ||
| 允许清空该组件. | ||
| 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 | ||
| 为输入长度创建一个计数器，如果未指定数字，则默认为25，不会应用任何验证。 | ||
| 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. | ||
| density | ||
| 调整组件使用的垂直高度。 | ||
| direction | ||
| 改变输入方向. | ||
| 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 | ||
| 将输入框置于错误状态，并传入自定义的错误信息。将与来自 rules 属性的任何验证相结合。这个字段不会触发验证。 | ||
| 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 | ||
| 强制组件使用聚焦时的样式。 | ||
| hide-details | ||
| 隐藏提示和验证错误。当设置为 auto 并且只有在有信息（提示、错误信息、计数器值等）要显示时，才会显示信息。 | ||
| hide-no-data | ||
| 当没有要显示的选项时，隐藏菜单。用于防止在异步获取结果之前打开菜单。也有打开菜单的效果，当“ items 数组改变，如果还没有打开。 | ||
| hide-selected | ||
| Do not display in the select menu items that are already selected. | ||
| hide-spin-buttons | ||
| 当类型设置为 number 时，在 input 元素上隐藏旋转按钮。 | ||
| 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 | ||
| 设定组件的最大宽度。 | ||
| 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 | ||
| 显示消息列表或消息（如果使用字符串） | ||
| min-width | ||
| 设定组件的最小宽度。 | ||
| model-value | ||
| 组件 v-mode 的值。如果组件支持多属性，默认为空数组。 | ||
| multiple | ||
| Changes select to multiple. Accepts array for value. | ||
| name | ||
| 设置组件的 name 属性. | ||
| no-data-text | ||
| Text shown when no items are provided to the component. | ||
| no-filter | ||
| Do not apply filtering when searching. Useful when data is being filtered server side. | ||
| 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. | ||
| search | ||
| Text input used to filter items. | ||
| 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 | ||
| 设定组件的宽度。 | ||
事件
| 名称 | 类型 |
|---|---|
| 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 | |
| 当组件的 model-value 更改时引发的事件。 | |
| 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 变量
| 名称 | 默认值 |
|---|---|
| $autocomplete-chips-control-min-height | |
| $autocomplete-chips-margin-bottom | |
| $autocomplete-chips-margin-top | |
| $autocomplete-content-border-radius | |
| $autocomplete-content-elevation | |
| $autocomplete-focused-input | |
| $autocomplete-input-buffer | |
| $autocomplete-line-height | |
| $autocomplete-selection-gap | |
| $autocomplete-transition | |