Selects Input Components

选择器

选择器组件用于从选项列表中收集用户提供的信息。

用例

API

名称

append-icon

默认值

'$vuetify.icons.dropdown'

类型

string

Components.Selects.

名称

append-outer-icon New in — v1.1

默认值

undefined

类型

string

Components.Selects.

名称

attach

默认值

false

类型

any

指定该组件应该分离到哪个DOM元素，使用CSS选择器字符串或元素的对象应用。

名称

autofocus

默认值

false

类型

boolean

启用自动聚焦

名称

background-color

默认值

undefined

类型

string

Components.Selects.

名称

box

默认值

false

类型

boolean

应用备用输入框样式

名称

browser-autocomplete

默认值

'on'

类型

string

设置搜索框的浏览器自动补全

名称

cache-items

默认值

false

类型

boolean

保留已经通过 items 属性的项在本地的唯一副本

名称

chips

默认值

false

类型

boolean

改变一个已选择项为小纸片（chips）的显示方式

名称

clear-icon

默认值

'$vuetify.icons.clear'

类型

string

Components.Selects.

名称

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

禁用输入

名称

dont-fill-mask-blanks

默认值

false

类型

boolean

键入时禁用自动字符显示

名称

error

默认值

false

类型

boolean

将输入框设置为手动错误状态。

名称

error-count

默认值

类型

number | string

Components.Selects.

名称

error-messages

默认值

[]

类型

string | array

将输入框置于错误状态，并传入自定义的错误信息。将与来自规则（rules）属性的任何验证相结合。这个字段不会触发验证。

名称

flat

默认值

false

类型

boolean

Components.Selects.

名称

full-width

默认值

false

类型

boolean

指定输入框为全屏宽度。

名称

height

默认值

undefined

类型

number | string

设置组件高度

名称

hide-details

默认值

false

类型

boolean

Components.Selects.

名称

hide-selected

默认值

false

类型

boolean

不要在选择菜单中显示已选择的项

名称

hint

默认值

undefined

类型

string

Components.Selects.

名称

item-avatar

默认值

avatar

类型

string | array | function

设置 items 属性的头像

名称

item-disabled

默认值

disabled

类型

string | array | function

禁用 items 的属性值

名称

item-text

默认值

text

类型

string | array | function

设置items'属性的文本值

名称

item-value

默认值

value

类型

string | array | function

设置items属性的值

名称

items

默认值

[]

类型

array

可以是一个对象数组或字符窜数组，当使用对象时，会查找文本和值字段，这可以使用 item-text 和 item-value 属性来改变。

名称

label

默认值

undefined

类型

string

Components.Selects.

名称

light

默认值

false

类型

boolean

应用明亮主题变体

名称

默认值

false

类型

boolean | string

Components.Selects.

名称

mask

默认值

undefined

类型

object | string

将自定义字符掩码应用于输入框。有关更多信息，请参阅上面的掩码表格。

名称

menu-props New in — v1.2

默认值

{"closeOnClick":false, "closeOnContentClick":false, "openOnClick":false, "maxHeight":300}

类型

string | array | object

Components.Selects.

名称

messages

默认值

[]

类型

string | array

Components.Selects.

名称

multiple

默认值

false

类型

boolean

多选，接受数组作为值

名称

no-data-text

默认值

'$vuetify.noDataText'

类型

string

当没有数据时现实的文本

名称

open-on-clear

默认值

false

类型

boolean

当使用 clearable 属性, 一旦清除，选择菜单将打开或保持打开，这个取决于当前状态

名称

outline

默认值

false

类型

boolean

Components.Selects.

名称

persistent-hint

默认值

false

类型

boolean

Components.Selects.

名称

placeholder

默认值

undefined

类型

string

Components.Selects.

名称

prefix

默认值

undefined

类型

string

显示前缀

名称

prepend-icon

默认值

undefined

类型

string

Components.Selects.

名称

prepend-inner-icon New in — v1.1

默认值

undefined

类型

string

Components.Selects.

名称

readonly

默认值

false

类型

boolean

Components.Selects.

名称

return-masked-value

默认值

false

类型

boolean

返回未修改的掩码字符串

名称

return-object

默认值

false

类型

boolean

将选择器的行为更改为直接返回对象，而不是 item-value 指定的值

名称

reverse New in — v1.1

默认值

false

类型

boolean

Components.Selects.

名称

rules

默认值

[]

类型

array

返回True或带有错误信息的字符串的函数数组。

名称

single-line

默认值

false

类型

boolean

Label does not move on focus/dirty

名称

small-chips New in — v1.1

默认值

false

类型

boolean

Components.Selects.

名称

solo

默认值

false

类型

boolean

Components.Selects.

名称

solo-inverted

默认值

false

类型

boolean

Components.Selects.

名称

success New in — v1.1

默认值

false

类型

boolean

Components.Selects.

名称

success-messages New in — v1.1

默认值

[]

类型

string | array

Components.Selects.

名称

suffix

默认值

undefined

类型

string

显示后缀

名称

type

默认值

'text'

类型

string

设置输入类型

名称

validate-on-blur

默认值

false

类型

boolean

延迟验证直到失去焦点的事件被触发

名称

value

默认值

undefined

类型

any

控制可见性

名称

value-comparator

默认值

(a: any, b: any) => boolean

类型

function

Components.Selects.

补充

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

示例

亮色主题

标准的单选有多种配置选项

图标

使用自定义前置或者后置图标。

多选

多选择器可以使用 v-chip 组件来显示已选项。

自定义选项的文本和值

你可以指定选项数组中的文本与值字段对应的特定属性，在默认情况下是 text 和 value。在这个例子中，我们也可以用 return-object 属性来返回被选中的对象。

Prepend/Append item slots

The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.

Change selection appearance

The selection scoped 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.

Up Next

Edit this page | language on Github

— Contribution Guide