输入

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

用例

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

template script style

  1. <template>
  2.   <v-container
  3.     id="input-usage"
  4.     fluid
  5.   >
  6.     <v-row>
  7.       <v-col cols="12">
  8.         <v-input
  9.           :messages="['Messages']"
  10.           append-icon="close"
  11.           prepend-icon="phone"
  12.         >
  13.           Default Slot
  14.         </v-input>
  15.       </v-col>
  16.     </v-row>
  17.   </v-container>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         text: '',
  6.       }
  7.     },
  8.     methods: {
  9.       appendIconCallback () {},
  10.       prependIconCallback () {},
  11.     },
  12.   }
  13. </script>
  1. <style>
  2.   #input-usage .v-input__prepend-outer,
  3.   #input-usage .v-input__append-outer,
  4.   #input-usage .v-input__slot,
  5.   #input-usage .v-messages {
  6.     border: 1px dashed rgba(0,0,0, .4);
  7.   }
  8. </style>

Inputs（输入） - 图1

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

API

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

Inputs（输入） - 图2

实战场

template script style

  1. <template>
  2.   <v-row>
  3.     <v-row justify="space-around">
  4.       <v-col cols="12">
  5.         <v-slider v-model="errorCount" label="Max error count" min="0" max="4"></v-slider>
  6.       </v-col>
  7.       <v-switch v-model="success" class="ma-2" label="Success"></v-switch>
  8.       <v-switch v-model="error" class="ma-2" label="Error"></v-switch>
  9.       <v-switch v-model="hideDetails" class="ma-2" label="Hide details"></v-switch>
  10.       <v-switch v-model="persistentHint" class="ma-2" label="Persistent hint"></v-switch>
  11.       <v-col cols="12">
  12.         <v-row justify="space-around">
  13.           <v-btn color="success" @click="success = true; error = false;">Success</v-btn>
  14.           <v-btn color="error" @click="success = false; error = true;">Error</v-btn>
  15.         </v-row>
  16.       </v-col>
  17.     </v-row>
  18.     <v-input
  19.       :messages="['Messages']"
  20.       :success="success"
  21.       :success-messages="successMsg"
  22.       :error="error"
  23.       :error-messages="errorMsg"
  24.       :hide-details="hideDetails"
  25.       :error-count="errorCount"
  26.       hint="I am hint"
  27.       :persistent-hint="persistentHint"
  28.       append-icon="close"
  29.       prepend-icon="phone"
  30.       @click:append="appendIconCallback"
  31.       @click:prepend="prependIconCallback"
  32.     >
  33.       Default Slot
  34.     </v-input>
  35.   </v-row>
  36. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         text: '',
  6.         success: false,
  7.         error: false,
  8.         hideDetails: false,
  9.         errorCount: 1,
  10.         persistentHint: true,
  11.       }
  12.     },
  13.     computed: {
  14.       successMsg () {
  15.         return this.success ? ['Done'] : []
  16.       },
  17.       errorMsg () {
  18.         return this.error ? ['Error', 'Another one', 'One more', 'All the errors'] : []
  19.       },
  20.     },
  21.     methods: {
  22.       appendIconCallback () {
  23.         alert('click:append')
  24.       },
  25.       prependIconCallback () {
  26.         alert('click:prepend')
  27.       },
  28.     },
  29.   }
  30. </script>
  1. <style>
  2.   #input-usage .v-input__prepend-outer,
  3.   #input-usage .v-input__append-outer,
  4.   #input-usage .v-input__slot,
  5.   #input-usage .v-messages {
  6.     border: 1px dashed rgba(0,0,0, .4);
  7.   }
  8. </style>

Inputs（输入） - 图3

示例

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

加载

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

template

  1. <template>
  2.   <v-text-field color="success" loading disabled></v-text-field>
  3. </template>

Inputs（输入） - 图4

提示

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

template script

  1. <template>
  2.   <v-row>
  3.     <v-switch v-model="showMessages" label="Show messages"></v-switch>
  4.     <v-input hint="I am hint" persistent-hint :messages="messages">Input</v-input>
  5.   </v-row>
  6. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       showMessages: false,
  5.     }),
  7.     computed: {
  8.       messages () {
  9.         return this.showMessages ? ['Message'] : undefined
  10.       },
  11.     },
  12.   }
  13. </script>

Inputs（输入） - 图5

成功

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

template

  1. <template>
  2.   <v-input :success-messages="['Success']" success disabled>Input</v-input>
  3. </template>

Inputs（输入） - 图6

错误

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

template

  1. <template>
  2.   <v-input :error-messages="['Fatal error']" error disabled>Input</v-input>
  3. </template>

Inputs（输入） - 图7

多个错误

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

template

  1. <template>
  2.   <v-input error-count="2" :error-messages="['Fatal error', 'Another error']" error disabled>Input</v-input>
  3. </template>

Inputs（输入） - 图8

Vuetify Twitter

Get updates on the latest happenings, release information and more on Twitter.

ads by Vuetify

](https://twitter.com/vuetifyjs?ref=vuetifyjs.com)

规则

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

template script

  1. <template>
  2.   <v-text-field :rules="rules"></v-text-field>
  3. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       rules: [
  5.         value => !!value || 'Required.',
  6.         value => (value || '').length <= 20 || 'Max 20 characters',
  7.         value => {
  8.           const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  9.           return pattern.test(value) || 'Invalid e-mail.'
  10.         },
  11.       ],
  12.     }),
  13.   }
  14. </script>

Inputs（输入） - 图9

Components.Inputs.examples.hide-details.heading

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

template script

  1. <template>
  2.   <div>
  3.     <v-text-field label="Main input" :rules="rules" hide-details="auto"></v-text-field>
  4.     <v-text-field label="Another input"></v-text-field>
  5.   </div>
  6. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       rules: [
  5.         value => !!value || 'Required.',
  6.         value => (value && value.length >= 3) || 'Min 3 characters',
  7.       ],
  8.     }),
  9.   }
  10. </script>

Inputs（输入） - 图10

插槽

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

template

  1. <template>
  2.   <v-text-field>
  3.     <v-icon slot="append" color="red">mdi-plus</v-icon>
  4.     <v-icon slot="prepend" color="green">mdi-minus</v-icon>
  5.   </v-text-field>
  6. </template>

Inputs（输入） - 图11

插槽事件

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

template script style

  1. <template>
  2.   <v-container
  3.     id="input-usage"
  4.     fluid
  5.   >
  6.     <v-row>
  7.       <v-col cols="12">
  8.         <v-input
  9.           :messages="['Messages']"
  10.           append-icon="close"
  11.           prepend-icon="phone"
  12.           @click:append="appendIconCallback"
  13.           @click:prepend="prependIconCallback"
  14.         >
  15.           Default Slot
  16.         </v-input>
  17.       </v-col>
  18.     </v-row>
  19.   </v-container>
  20. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         text: '',
  6.       }
  7.     },
  8.     methods: {
  9.       appendIconCallback () {
  10.         alert('click:append')
  11.       },
  12.       prependIconCallback () {
  13.         alert('click:prepend')
  14.       },
  15.     },
  16.   }
  17. </script>
  1. <style>
  2.   #input-usage .v-input__prepend-outer,
  3.   #input-usage .v-input__append-outer,
  4.   #input-usage .v-input__slot,
  5.   #input-usage .v-messages {
  6.     border: 1px dashed rgba(0,0,0, .4);
  7.   }
  8. </style>

Inputs（输入） - 图12