文本框

文本框组件用于收集用户提供的信息。

用例

A simple text field with placeholder and/or label.

API

v-text-field
名称
append-icon
默认值
undefined
类型
string

Components.TextFields.

名称
append-outer-icon New in — v1.1
默认值
undefined
类型
string

Components.TextFields.

名称
autofocus
默认值
false
类型
boolean

启用自动聚焦

名称
background-color
默认值
undefined
类型
string

Components.TextFields.

名称
box
默认值
false
类型
boolean

应用备用输入框样式

名称
browser-autocomplete
默认值
undefined
类型
string

Components.TextFields.

名称
clear-icon
默认值
'$vuetify.icons.clear'
类型
string

Components.TextFields.

名称
clearable
默认值
false
类型
boolean

添加输入框清除功能,默认图标是 Material Icons clear

名称
color
默认值
'primary'
类型
string

将指定的色彩应用与控件

名称
counter
默认值
undefined
类型
boolean | number | string

为输入长度创建一个计数器,如果未指定数字,则默认为25,不会应用任何验证。

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
disabled
默认值
false
类型
boolean

Components.TextFields.

名称
dont-fill-mask-blanks
默认值
false
类型
boolean

键入时禁用自动字符显示

名称
error
默认值
false
类型
boolean

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

名称
error-count
默认值
1
类型
number | string

Components.TextFields.

名称
error-messages
默认值
[]
类型
string | array

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

名称
flat
默认值
false
类型
boolean

Components.TextFields.

名称
full-width
默认值
false
类型
boolean

指定输入框为全屏宽度。

名称
height
默认值
undefined
类型
number | string

设置组件高度

名称
hide-details
默认值
false
类型
boolean

Components.TextFields.

名称
hint
默认值
undefined
类型
string

Components.TextFields.

名称
label
默认值
undefined
类型
string

Components.TextFields.

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
loading
默认值
false
类型
boolean | string

Components.TextFields.

名称
mask
默认值
undefined
类型
object | string

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

名称
messages
默认值
[]
类型
string | array

Components.TextFields.

名称
outline
默认值
false
类型
boolean

Components.TextFields.

名称
persistent-hint
默认值
false
类型
boolean

Components.TextFields.

名称
placeholder
默认值
undefined
类型
string

Components.TextFields.

名称
prefix
默认值
undefined
类型
string

显示前缀

名称
prepend-icon
默认值
undefined
类型
string

Components.TextFields.

名称
prepend-inner-icon New in — v1.1
默认值
undefined
类型
string

Components.TextFields.

名称
readonly
默认值
false
类型
boolean

Components.TextFields.

名称
return-masked-value
默认值
false
类型
boolean

返回未修改的掩码字符串

名称
reverse New in — v1.1
默认值
false
类型
boolean

Components.TextFields.

名称
rules
默认值
[]
类型
array

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

名称
single-line
默认值
false
类型
boolean

Label does not move on focus/dirty

名称
solo
默认值
false
类型
boolean

Components.TextFields.

名称
solo-inverted
默认值
false
类型
boolean

Components.TextFields.

名称
success New in — v1.1
默认值
false
类型
boolean

Components.TextFields.

名称
success-messages New in — v1.1
默认值
[]
类型
string | array

Components.TextFields.

名称
suffix
默认值
undefined
类型
string

显示后缀

名称
type
默认值
'text'
类型
string

设置输入类型

名称
validate-on-blur
默认值
false
类型
boolean

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

名称
value
默认值
undefined
类型
any

控制可见性

补充

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

示例

单行亮色主题

单行文本框的标签不会浮动到焦点或数据之上。

Disabled and readonly

Text fields can be disabled or readonly.

带图标

图标可以指定为预加或附加。

Clearable

When clearable, you can customize the clear icon with clear-icon.

Icon events

click:prepend, click:append, click:append-outer, and click:clear will be emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead.

Icon slots

Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.

Label slot

Text field label can be defined in label slot - that will allow to use HTML content

字符计数器

使用计数器通知用户字符限制,计数器本身不执行任何验证,您需要将其与内部验证系统或第三方库配对。

密码输入

密码输入可以用附加图标以及回调一起控制密码的可见性。

验证

Vuetify包含简单的验证通过使用 rules 属性,这个属性接受一个回调函数组,在验证规则时,当前的 v-model 值将被传递给回调函数,这个回调函数必须返回 tureString 或者错误信息。

带计数器的全宽文本框

全宽文本框允许你创建一个不限制输入的文本框,在下面的例子中,我们是用 v-divider 来分隔文本框。

提示文本

在文本框组件使用 hint 来设置将提示的文本添加到文本字段下。使用 persistent-hint 保持提示文本在文本字段未被聚焦时保持可见性。

前缀和后缀

prefixsuffix 属性允许你在文本字段旁添加一段不可修改的文本。

自定义验证

虽然内置的 v-form 组件以及第三方插件比如 vuelidate or vee-validation 可以帮助你简化验证过程,但你仍可以简单的自行控制它。

盒子样式

文本框可以使用替代的样式设计,但是这种模式下不支持附加或者前置图标属性。

Solo style

Text-fields can be used with an alternative solo design.

Outline style

Text fields can be used with an alternative outline design.

自定义颜色

你可以将文本框的颜色更改为 Material design 调色板中的任何颜色。下面是带验证的自定义表单的示例实现。

掩码

文本框可以验证字符掩码,使用预制或自定义规则,你可以选择格式化和验证特定的字符集。

进度条

你可以用一个进度条来替换下划线,你可以使用与文本框具有相同颜色的默认的不确定进度的进度条,你也可以使用 progress 插槽来自定义进度条。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore