VSelect API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| active | ||
| 控制项的 active 状态。这通常用于高亮显示组件。 | ||
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| 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 时, 设置清除图标的属性. | ||
| 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. | ||
| 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 属性的任何验证相结合。这个字段不会触发验证。 | ||
| 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 | ||
| Set property of items’s value - must be primitive. Dot notation is supported. Note: This is currently not supported with v-combobox GitHub Issue . | ||
| 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 | ||
| Sets the minimum width of the select’s v-menu content. | ||
| 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. | ||
| open-on-clear | ||
| When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state. | ||
| 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 | ||
| 设定组件的宽度。 | ||
事件
| 名称 | 类型 |
|---|---|
| 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 更改时引发的事件。 | |
插槽
| 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 变量
| 名称 | 默认值 |
|---|---|
| $select-chips-control-min-height | |
| $select-chips-margin-bottom | |
| $select-chips-margin-top | |
| $select-content-border-radius | |
| $select-content-elevation | |
| $select-line-height | |
| $select-transition | |