自定义输入框

v-input 组件为您提供创建自己的自定义输入的基线。它由 prepend/append 插槽、messages 和 default 插槽组成。

使用

v-input 有 4 个主要区域。prepend 插槽，append 插槽，default 插槽和消息部分。它们参与了所有表单组件的核心逻辑。

API

组件	描述
v-input	主要组件

注意

WARNING

v-input 组件用作所有 Vuetify 表单控件的包装器。它不会继承属性，因为这些属性应该被传递给内部输入组件。

示例

属性

错误信息 (Error)

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

错误个数

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

隐藏详细信息

当 hide-details 设置为 auto 时，只有在有信息（提示、错误信息等）显示的情况下，才会显示信息。

提示(hint)

v-input 可以有 hint ，可以告诉用户如何使用输入。 persistent-hint 属性使提示在没有显示消息时始终可见。

加载(loading)

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

规则(Rules)

您可以将自定义验证规则添加到 v-input，将它们添加为返回 true/error 消息的函数。注意：v-text-field 仅用于示例。

成功

作为任何可验证的Vuetify组件，v-input 可以使用error prop设置为错误状态，可以使用 success-messages 属性添加消息。

事件

点击槽位

v-input 的插槽可以有 click:append和click:prepend 事件。注意：v-text-field` 仅用于示例。

插槽

附加代码

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