文本框
文本框组件用于收集用户提供的信息。
API
Components.TextFields.
Components.TextFields.
启用自动聚焦
Components.TextFields.
应用备用输入框样式
Components.TextFields.
Components.TextFields.
添加输入框清除功能,默认图标是 Material Icons clear
将指定的色彩应用与控件
为输入长度创建一个计数器,如果未指定数字,则默认为25,不会应用任何验证。
应用暗黑主题变体
Components.TextFields.
键入时禁用自动字符显示
将输入框设置为手动错误状态。
Components.TextFields.
将输入框置于错误状态,并传入自定义的错误信息。将与来自规则(rules)属性的任何验证相结合。这个字段不会触发验证。
Components.TextFields.
指定输入框为全屏宽度。
设置组件高度
Components.TextFields.
Components.TextFields.
Components.TextFields.
应用明亮主题变体
Components.TextFields.
将自定义字符掩码应用于输入框。有关更多信息,请参阅上面的掩码表格。
Components.TextFields.
Components.TextFields.
Components.TextFields.
Components.TextFields.
显示前缀
Components.TextFields.
Components.TextFields.
Components.TextFields.
返回未修改的掩码字符串
Components.TextFields.
返回True或带有错误信息的字符串的函数数组。
Label does not move on focus/dirty
Components.TextFields.
Components.TextFields.
Components.TextFields.
Components.TextFields.
显示后缀
设置输入类型
延迟验证直到失去焦点的事件被触发
控制可见性
补充
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 | ##:##:## |
示例
单行亮色主题
单行文本框的标签不会浮动到焦点或数据之上。
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 值将被传递给回调函数,这个回调函数必须返回 ture
或 String
或者错误信息。
带计数器的全宽文本框
全宽文本框允许你创建一个不限制输入的文本框,在下面的例子中,我们是用 v-divider
来分隔文本框。
提示文本
在文本框组件使用 hint
来设置将提示的文本添加到文本字段下。使用 persistent-hint
保持提示文本在文本字段未被聚焦时保持可见性。
前缀和后缀
prefix
和 suffix
属性允许你在文本字段旁添加一段不可修改的文本。
自定义验证
虽然内置的 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
插槽来自定义进度条。