文本框组件用于收集用户提供的信息。
下面是一些简单到复杂的例子。
单行文本框的标签不会浮动到焦点或数据之上。
shaped
文本框如果被 outlined
则显示为圆角,如果被 filled
,则为更高的 border-radius
。
文本框可以是 disabled
或 readonly
。
您可以使用 dense
属性降低文本字段的高度。
您可以使用 prepend-icon
, append-icon
和 append-outer-icon
属性添加图标到文本字段
当处于 clearable
时,您可以使用 clear-icon
自定义清除图标。
使用 counter
属性来通知用户字符限制。 计数器本身不会执行任何验证。 您需要将其与内部验证系统或第三方库配对。 您可以在常规,方框或轮廓文本字段中使用它。
当 hide-details
设置为 auto
时,只有在有消息(提示、错误消息、计数器值等)要显示时,才会显示消息。
密码输入可以用附加图标以及回调一起控制密码的可见性。
文本框可以使用替代的样式设计,但是这种模式下不支持附加或者前置图标属性。
文本字段可以与其他单独设计一起使用。
文本字段可以与其他轮廓设计一起使用。
你可以将文本框的颜色更改为 Material design 调色板中的任何颜色。下面是带验证的自定义表单的示例实现。
在文本框组件使用 hint
来设置将提示的文本添加到文本字段下。使用 persistent-hint
保持提示文本在文本字段未被聚焦时保持可见性。
prefix
和 suffix
属性允许你在文本字段旁添加一段不可修改的文本。
click:prepend
, click:append
, click:append-outer
, 和 click:clear
将在单击相应的图标时发出。请注意,如果使用插槽,则不会触发这些事件。
可以使用插槽来扩展输入的功能,而不是使用 prepend / append / append-outer 图标。
文本字段标签可以在 label
插槽中定义 - 允许使用 HTML 内容
Vuetify包含简单的验证通过使用 rules
属性,这个属性接受一个回调函数组,在验证规则时,当前的 v-model 值将被传递给回调函数,这个回调函数必须返回 ture
或 String
或者错误信息。
全宽文本框允许你创建一个不限制输入的文本框,在下面的例子中,我们是用 v-divider
来分隔文本框。
你可以用一个进度条来替换下划线,你可以使用与文本框具有相同颜色的默认的不确定进度的进度条,你也可以使用 progress
插槽来自定义进度条。
虽然内置的 v-form
组件以及第三方插件比如 vuelidate or vee-validation 可以帮助你简化验证过程,但你仍可以简单的自行控制它。