Vuetify

商店

企业版

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

具有占位符 和/或 标签的简单文本字段。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

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

shaped 文本框如果被 outlined 则显示为圆角,如果被 filled,则为更高的 border-radius

文本框可以是 disabledreadonly

您可以使用 dense 属性降低文本字段的高度。

您可以使用 prepend-icon, append-iconappend-outer-icon 属性添加图标到文本字段

当处于 clearable 时,您可以使用 clear-icon 自定义清除图标。

使用 counter 属性来通知用户字符限制。 计数器本身不会执行任何验证。 您需要将其与内部验证系统或第三方库配对。 您可以在常规,方框或轮廓文本字段中使用它。

hide-details 设置为 auto 时,只有在有消息(提示、错误消息、计数器值等)要显示时,才会显示消息。

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

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

文本字段可以与其他单独设计一起使用。

文本字段可以与其他轮廓设计一起使用。

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

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

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

click:prepend, click:append, click:append-outer, 和 click:clear 将在单击相应的图标时发出。请注意,如果使用插槽,则不会触发这些事件。

可以使用插槽来扩展输入的功能,而不是使用 prepend / append / append-outer 图标。

文本字段标签可以在 label 插槽中定义 - 允许使用 HTML 内容

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

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

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

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

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!