Vuetify

商店

企业版

v-input 组件为您提供创建自己的自定义输入的基础。 它由一个 前置/追加 插槽,消息和一个默认插槽组成。 recommended 扩展了此组件,但可以将其用作独立组件。

v-input 有四个主要区域。前列位置、附加位置、默认位置和消息。 这些构成了所有形式组件之间共享的核心逻辑。

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

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

v-input 具有可使用的 loading 状态,例如 用于数据加载指示。 注意:仅以 v-text-field 为例。

v-input 可以具有 hint,可以告诉用户如何使用输入。 如果没有显示任何消息,persistent-hint 属性将使提示始终可见。

与任何可验证的 Vuetify 组件一样,v-input 可以使用 success 属性设置为成功状态,也可以使用 success-messages 属性添加消息。

作为任何可验证的 Vuetify 组件,可以使用 error 属性将 v-input 设置为错误状态,可以使用 error-messages 属性添加消息。 您可以使用 error-count 属性确定要显示的错误消息数。

您可以使用 error-count 属性向 v-input 添加多个错误。

您可以将自定义验证规则添加到 v-input,将其添加为返回 true/error 消息的函数。 注意:仅以 v-text-field 为例。

hide-details 设置为 auto 时,只有在有信息(提示、错误信息等)显示的情况下,才会显示信息。

v-input 具有 appendprepend 插槽。 您可以在其中放置自定义图标。

v-input 可以可以具有插槽的 click:appendclick:prepend 两个事件。注意:仅以 v-text-field 为例。

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