文本框

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

用例

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

template

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6" md="3">
  7.           <v-text-field
  8.             label="Regular"
  9.           ></v-text-field>
  10.         </v-col>
  12.         <v-col cols="12" sm="6" md="3">
  13.           <v-text-field
  14.             label="Regular"
  15.             placeholder="Placeholder"
  16.           ></v-text-field>
  17.         </v-col>
  19.         <v-col cols="12" sm="6" md="3">
  20.           <v-text-field
  21.             label="Solo"
  22.             solo
  23.           ></v-text-field>
  24.         </v-col>
  26.         <v-col cols="12" sm="6" md="3">
  27.           <v-text-field
  28.             label="Solo"
  29.             placeholder="Placeholder"
  30.             solo
  31.           ></v-text-field>
  32.         </v-col>
  34.         <v-col cols="12" sm="6" md="3">
  35.           <v-text-field
  36.             label="Filled"
  37.             filled
  38.           ></v-text-field>
  39.         </v-col>
  41.         <v-col cols="12" sm="6" md="3">
  42.           <v-text-field
  43.             label="Filled"
  44.             placeholder="Placeholder"
  45.             filled
  46.           ></v-text-field>
  47.         </v-col>
  49.         <v-col cols="12" sm="6" md="3">
  50.           <v-text-field
  51.             label="Outlined"
  52.             outlined
  53.           ></v-text-field>
  54.         </v-col>
  56.         <v-col cols="12" sm="6" md="3">
  57.           <v-text-field
  58.             label="Outlined"
  59.             placeholder="Placeholder"
  60.             outlined
  61.           ></v-text-field>
  62.         </v-col>
  64.       </v-row>
  65.     </v-container>
  66.   </v-form>
  67. </template>

Text fields（文本框） - 图1

API

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

Text fields（文本框） - 图2

实战场

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col
  5.         cols="12"
  6.         sm="6"
  7.       >
  8.         <v-text-field
  9.           v-model="label"
  10.           label="Label"
  11.         ></v-text-field>
  12.         <v-text-field
  13.           v-model="hint"
  14.           label="Hint"
  15.         ></v-text-field>
  16.         <v-text-field
  17.           v-model="placeholder"
  18.           label="Placeholder"
  19.         ></v-text-field>
  20.       </v-col>
  21.       <v-col cols="12"></v-col>
  22.       <v-col
  23.         cols="12"
  24.         md="6"
  25.       >
  26.         <v-switch
  27.           v-model="shaped"
  28.           class="ma-1"
  29.           label="Shaped (requires Filled, Outlined or Solo)"
  30.           :disabled="!outlined && !filled && !solo"
  31.         ></v-switch>
  32.         <v-switch
  33.           v-model="outlined"
  34.           class="ma-1"
  35.           label="Outlined"
  36.         ></v-switch>
  37.         <v-switch
  38.           v-model="rounded"
  39.           class="ma-1"
  40.           label="Rounded (requires Filled, Outlined or Solo)"
  41.           :disabled="!filled && !outlined && !solo"
  42.         ></v-switch>
  43.         <v-switch
  44.           v-model="solo"
  45.           class="ma-1"
  46.           label="Solo"
  47.           :disabled="filled"
  48.         ></v-switch>
  49.         <v-switch
  50.           v-model="singleLine"
  51.           class="ma-1"
  52.           label="Single-line"
  53.         ></v-switch>
  54.         <v-switch
  55.           v-model="filled"
  56.           class="ma-1"
  57.           label="Filled"
  58.           :disabled="outlined || solo"
  59.         ></v-switch>
  60.         <v-switch
  61.           v-model="clearable"
  62.           class="ma-1"
  63.           label="Clearable"
  64.         ></v-switch>
  65.         <v-switch
  66.           v-model="persistentHint"
  67.           class="ma-1"
  68.           label="Persistent Hint"
  69.         ></v-switch>
  70.         <v-switch
  71.           v-model="loading"
  72.           class="ma-1"
  73.           label="Loading"
  74.         ></v-switch>
  75.         <v-switch
  76.           v-model="flat"
  77.           class="ma-1"
  78.           label="Flat (requires Solo)"
  79.           :disabled="!solo"
  80.         ></v-switch>
  81.         <v-switch
  82.           v-model="dense"
  83.           class="ma-1"
  84.           label="Dense"
  85.         ></v-switch>
  86.         <v-row>
  87.           <v-switch
  88.             v-model="counterEn"
  89.             class="ma-0 mr-2 ml-1"
  90.             label="Counter"
  91.           ></v-switch>
  92.           <v-slider
  93.             v-model="counter"
  94.             :disabled="!counterEn"
  95.           ></v-slider>
  96.         </v-row>
  97.       </v-col>
  98.       <v-col
  99.         cols="12"
  100.         md="6"
  101.       >
  102.         <v-sheet
  103.           elevation="12"
  104.           class="pa-12"
  105.         >
  106.           <v-text-field
  107.             v-model="model"
  108.             :label="label"
  109.             :hint="hint"
  110.             :placeholder="placeholder"
  111.             :shaped="shaped"
  112.             :outlined="outlined"
  113.             :rounded="rounded"
  114.             :solo="solo"
  115.             :single-line="singleLine"
  116.             :filled="filled"
  117.             :clearable="clearable"
  118.             :persistent-hint="persistentHint"
  119.             :loading="loading"
  120.             :flat="flat"
  121.             :counter="counterEn ? counter : false"
  122.             :dense="dense"
  123.           ></v-text-field>
  124.           <div class="mt-12 text-center">
  125.             Value: {{ model }}
  126.           </div>
  127.         </v-sheet>
  128.       </v-col>
  129.     </v-row>
  130.   </v-container>
  131. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       model: 'I\'m a text field',
  5.       label: 'Hey!',
  6.       hint: 'Customize me!',
  7.       placeholder: '',
  8.       shaped: false,
  9.       outlined: false,
  10.       rounded: false,
  11.       solo: false,
  12.       singleLine: false,
  13.       filled: false,
  14.       clearable: false,
  15.       persistentHint: false,
  16.       loading: false,
  17.       flat: false,
  18.       counterEn: false,
  19.       counter: 0,
  20.       dense: false,
  21.     }),
  22.   }
  23. </script>

Text fields（文本框） - 图3

示例

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

单行

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

template

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             label="Regular"
  9.             single-line
  10.           ></v-text-field>
  11.         </v-col>
  13.         <v-col cols="12" sm="6">
  14.           <v-text-field
  15.             label="Solo"
  16.             single-line
  17.             solo
  18.           ></v-text-field>
  19.         </v-col>
  21.         <v-col cols="12" sm="6">
  22.           <v-text-field
  23.             label="Filled"
  24.             single-line
  25.             filled
  26.           ></v-text-field>
  27.         </v-col>
  29.         <v-col cols="12" sm="6">
  30.           <v-text-field
  31.             label="Outlined"
  32.             single-line
  33.             outlined
  34.           ></v-text-field>
  35.         </v-col>
  37.       </v-row>
  38.     </v-container>
  39.   </v-form>
  40. </template>

Text fields（文本框） - 图4

形状

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             v-model="first"
  9.             label="First Name"
  10.             outlined
  11.             shaped
  12.           ></v-text-field>
  13.         </v-col>
  15.         <v-col cols="12" sm="6">
  16.           <v-text-field
  17.             v-model="last"
  18.             label="Last Name"
  19.             filled
  20.             shaped
  21.           ></v-text-field>
  22.         </v-col>
  24.       </v-row>
  25.     </v-container>
  26.   </v-form>
  27. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       first: 'John',
  5.       last: 'Doe',
  6.     }),
  7.   }
  8. </script>

Text fields（文本框） - 图5

禁用且只读

文本框可以是 disabled 或 readonly。

template

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             value="John Doe"
  9.             label="Regular"
  10.             disabled
  11.           ></v-text-field>
  12.         </v-col>
  14.         <v-col cols="12" sm="6">
  15.           <v-text-field
  16.             value="John Doe"
  17.             label="Regular"
  18.             readonly
  19.           ></v-text-field>
  20.         </v-col>
  22.         <v-col cols="12" sm="6">
  23.           <v-text-field
  24.             value="John Doe"
  25.             label="Solo"
  26.             solo
  27.             disabled
  28.           ></v-text-field>
  29.         </v-col>
  31.         <v-col cols="12" sm="6">
  32.           <v-text-field
  33.             value="John Doe"
  34.             label="Solo"
  35.             solo
  36.             readonly
  37.           ></v-text-field>
  38.         </v-col>
  40.         <v-col cols="12" sm="6">
  41.           <v-text-field
  42.             value="John Doe"
  43.             label="Filled"
  44.             filled
  45.             disabled
  46.           ></v-text-field>
  47.         </v-col>
  49.         <v-col cols="12" sm="6">
  50.           <v-text-field
  51.             value="John Doe"
  52.             label="Filled"
  53.             filled
  54.             readonly
  55.           ></v-text-field>
  56.         </v-col>
  58.         <v-col cols="12" sm="6">
  59.           <v-text-field
  60.             value="John Doe"
  61.             label="Outlined"
  62.             outlined
  63.             disabled
  64.           ></v-text-field>
  65.         </v-col>
  67.         <v-col cols="12" sm="6">
  68.           <v-text-field
  69.             value="John Doe"
  70.             label="Outlined"
  71.             outlined
  72.             readonly
  73.           ></v-text-field>
  74.         </v-col>
  76.       </v-row>
  77.     </v-container>
  78.   </v-form>
  79. </template>

Text fields（文本框） - 图6

密集

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

template

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6" md="4">
  7.           <v-text-field
  8.             dense
  9.             label="Regular"
  10.           ></v-text-field>
  11.         </v-col>
  13.         <v-col cols="12" sm="6" md="4">
  14.           <v-text-field
  15.             label="Filled"
  16.             filled
  17.             dense
  18.           ></v-text-field>
  19.         </v-col>
  21.         <v-col cols="12" sm="6" md="4">
  22.           <v-text-field
  23.             label="Filled"
  24.             placeholder="Dense & Rounded"
  25.             filled
  26.             rounded
  27.             dense
  28.           ></v-text-field>
  29.         </v-col>
  31.         <v-col cols="12" sm="6" md="4">
  32.           <v-text-field
  33.             label="Solo"
  34.             solo
  35.             dense
  36.           ></v-text-field>
  37.         </v-col>
  39.         <v-col cols="12" sm="6" md="4">
  40.           <v-text-field
  41.             label="Outlined"
  42.             outlined
  43.             dense
  44.           ></v-text-field>
  45.         </v-col>
  47.         <v-col cols="12" sm="6" md="4">
  48.           <v-text-field
  49.             label="Outlined"
  50.             placeholder="Placeholder"
  51.             outlined
  52.             dense
  53.           ></v-text-field>
  54.         </v-col>
  56.       </v-row>
  57.     </v-container>
  58.   </v-form>
  59. </template>

Text fields（文本框） - 图7

图标

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

template

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  8.           <v-text-field
  9.             label="Prepend"
  10.             prepend-icon="place"
  11.           ></v-text-field>
  13.           <v-text-field
  14.             label="Prepend inner"
  15.             prepend-inner-icon="place"
  16.           ></v-text-field>
  18.           <v-text-field
  19.             label="Append"
  20.             append-icon="place"
  21.           ></v-text-field>
  23.           <v-text-field
  24.             label="Append outer"
  25.             append-outer-icon="place"
  26.           ></v-text-field>
  28.         </v-col>
  30.         <v-col cols="12" sm="6">
  32.           <v-text-field
  33.             solo
  34.             label="Prepend"
  35.             prepend-icon="place"
  36.           ></v-text-field>
  38.           <v-text-field
  39.             solo
  40.             label="Prepend inner"
  41.             prepend-inner-icon="place"
  42.           ></v-text-field>
  44.           <v-text-field
  45.             solo
  46.             label="Append"
  47.             append-icon="place"
  48.           ></v-text-field>
  50.           <v-text-field
  51.             solo
  52.             label="Append outer"
  53.             append-outer-icon="place"
  54.           ></v-text-field>
  56.         </v-col>
  58.         <v-col cols="12" sm="6">
  60.           <v-text-field
  61.             filled
  62.             label="Prepend"
  63.             prepend-icon="place"
  64.           ></v-text-field>
  66.           <v-text-field
  67.             filled
  68.             label="Prepend inner"
  69.             prepend-inner-icon="place"
  70.           ></v-text-field>
  72.           <v-text-field
  73.             filled
  74.             label="Append"
  75.             append-icon="place"
  76.           ></v-text-field>
  78.           <v-text-field
  79.             filled
  80.             label="Append outer"
  81.             append-outer-icon="place"
  82.           ></v-text-field>
  84.         </v-col>
  86.         <v-col cols="12" sm="6">
  88.           <v-text-field
  89.             outlined
  90.             label="Prepend"
  91.             prepend-icon="place"
  92.           ></v-text-field>
  94.           <v-text-field
  95.             outlined
  96.             label="Prepend inner"
  97.             prepend-inner-icon="place"
  98.           ></v-text-field>
  100.           <v-text-field
  101.             outlined
  102.             label="Append"
  103.             append-icon="place"
  104.           ></v-text-field>
  106.           <v-text-field
  107.             outlined
  108.             label="Append outer"
  109.             append-outer-icon="place"
  110.           ></v-text-field>
  112.         </v-col>
  114.       </v-row>
  115.     </v-container>
  116.   </v-form>
  117. </template>

Text fields（文本框） - 图8

可清除

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             v-model="message1"
  9.             label="Regular"
  10.             clearable
  11.           ></v-text-field>
  12.         </v-col>
  14.         <v-col cols="12" sm="6">
  15.           <v-text-field
  16.             v-model="message2"
  17.             solo
  18.             label="Solo"
  19.             clearable
  20.           ></v-text-field>
  21.         </v-col>
  23.         <v-col cols="12" sm="6">
  24.           <v-text-field
  25.             v-model="message3"
  26.             filled
  27.             label="Filled"
  28.             clearable
  29.           ></v-text-field>
  30.         </v-col>
  32.         <v-col cols="12" sm="6">
  33.           <v-text-field
  34.             v-model="message4"
  35.             label="Outlined"
  36.             outlined
  37.             clearable
  38.           ></v-text-field>
  39.         </v-col>
  41.       </v-row>
  42.     </v-container>
  43.   </v-form>
  44. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         message1: 'Hey!',
  6.         message2: 'Hey!',
  7.         message3: 'Hey!',
  8.         message4: 'Hey!',
  9.       }
  10.     },
  11.   }
  12. </script>

Text fields（文本框） - 图9

字符计数器

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             v-model="title"
  9.             :rules="rules"
  10.             counter="25"
  11.             hint="This field uses counter prop"
  12.             label="Regular"
  13.           ></v-text-field>
  14.         </v-col>
  16.         <v-col cols="12" sm="6">
  17.           <v-text-field
  18.             v-model="description"
  19.             :rules="rules"
  20.             counter
  21.             maxlength="25"
  22.             hint="This field uses maxlength attribute"
  23.             label="Limit exceeded"
  24.           ></v-text-field>
  25.         </v-col>
  27.         <v-col cols="12" sm="6">
  28.           <v-text-field
  29.             v-model="title"
  30.             :rules="rules"
  31.             counter="25"
  32.             filled
  33.             label="Filled"
  34.           ></v-text-field>
  35.         </v-col>
  37.         <v-col cols="12" sm="6">
  38.           <v-text-field
  39.             v-model="title"
  40.             :rules="rules"
  41.             counter="25"
  42.             label="Outlined"
  43.             outlined
  44.           ></v-text-field>
  45.         </v-col>
  47.       </v-row>
  48.     </v-container>
  49.   </v-form>
  50. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         title: 'Preliminary report',
  6.         description: 'California is a state in the western United States',
  7.         rules: [v => v.length <= 25 || 'Max 25 characters'],
  8.       }
  9.     },
  10.   }
  11. </script>

Text fields（文本框） - 图10

自动隐藏详细信息

当 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>

Text fields（文本框） - 图11

密码输入

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container fluid>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             v-model="password"
  9.             :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
  10.             :rules="[rules.required, rules.min]"
  11.             :type="show1 ? 'text' : 'password'"
  12.             name="input-10-1"
  13.             label="Normal with hint text"
  14.             hint="At least 8 characters"
  15.             counter
  16.             @click:append="show1 = !show1"
  17.           ></v-text-field>
  18.         </v-col>
  20.         <v-col cols="12" sm="6">
  21.           <v-text-field
  22.             :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
  23.             :rules="[rules.required, rules.min]"
  24.             :type="show2 ? 'text' : 'password'"
  25.             name="input-10-2"
  26.             label="Visible"
  27.             hint="At least 8 characters"
  28.             value="wqfasds"
  29.             class="input-group--focused"
  30.             @click:append="show2 = !show2"
  31.           ></v-text-field>
  32.         </v-col>
  34.         <v-col cols="12" sm="6">
  35.           <v-text-field
  36.             :append-icon="show3 ? 'mdi-eye' : 'mdi-eye-off'"
  37.             :rules="[rules.required, rules.min]"
  38.             :type="show3 ? 'text' : 'password'"
  39.             name="input-10-2"
  40.             label="Not visible"
  41.             hint="At least 8 characters"
  42.             value="wqfasds"
  43.             class="input-group--focused"
  44.             @click:append="show3 = !show3"
  45.           ></v-text-field>
  46.         </v-col>
  48.         <v-col cols="12" sm="6">
  49.           <v-text-field
  50.             :append-icon="show4 ? 'mdi-eye' : 'mdi-eye-off'"
  51.             :rules="[rules.required, rules.emailMatch]"
  52.             :type="show4 ? 'text' : 'password'"
  53.             name="input-10-2"
  54.             label="Error"
  55.             hint="At least 8 characters"
  56.             value="Pa"
  57.             error
  58.             @click:append="show4 = !show4"
  59.           ></v-text-field>
  60.         </v-col>
  62.       </v-row>
  63.     </v-container>
  64.   </v-form>
  65. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         show1: false,
  6.         show2: true,
  7.         show3: false,
  8.         show4: false,
  9.         password: 'Password',
  10.         rules: {
  11.           required: value => !!value || 'Required.',
  12.           min: v => v.length >= 8 || 'Min 8 characters',
  13.           emailMatch: () => ('The email and password you entered don\'t match'),
  14.         },
  15.       }
  16.     },
  17.   }
  18. </script>

Text fields（文本框） - 图12

盒子样式

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             v-model="first"
  9.             label="First Name"
  10.             filled
  11.           ></v-text-field>
  12.         </v-col>
  14.         <v-col cols="12" sm="6">
  15.           <v-text-field
  16.             v-model="last"
  17.             label="Last Name"
  18.             filled
  19.           ></v-text-field>
  20.         </v-col>
  22.       </v-row>
  23.     </v-container>
  24.   </v-form>
  25. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       first: 'John',
  5.       last: 'Doe',
  6.     }),
  7.   }
  8. </script>

Text fields（文本框） - 图13

单独样式

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             v-model="first"
  9.             label="First Name"
  10.             solo
  11.           ></v-text-field>
  12.         </v-col>
  14.         <v-col cols="12" sm="6">
  15.           <v-text-field
  16.             v-model="last"
  17.             label="Last Name"
  18.             solo-inverted
  19.           ></v-text-field>
  20.         </v-col>
  22.       </v-row>
  23.     </v-container>
  24.   </v-form>
  25. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       first: 'John',
  5.       last: 'Doe',
  6.     }),
  7.   }
  8. </script>

Text fields（文本框） - 图14

Alpha Theme

Complete theme experience including enhanced Vue CLI, full documentation, 5 custom components and much more!

ads by Vuetify

](https://store.vuetifyjs.com/product/alpha-theme?ref=vuetifyjs.com)

轮廓样式

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             v-model="first"
  9.             label="First Name"
  10.             outlined
  11.           ></v-text-field>
  12.         </v-col>
  14.         <v-col cols="12" sm="6">
  15.           <v-text-field
  16.             v-model="last"
  17.             label="Last Name"
  18.             outlined
  19.           ></v-text-field>
  20.         </v-col>
  22.       </v-row>
  23.     </v-container>
  24.   </v-form>
  25. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       first: 'John',
  5.       last: 'Doe',
  6.     }),
  7.   }
  8. </script>

Text fields（文本框） - 图15

自定义颜色

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

template script

  1. <template>
  2.   <v-card flat>
  3.     <v-snackbar
  4.       v-model="snackbar"
  5.       absolute
  6.       top
  7.       right
  8.       color="success"
  9.     >
  10.       <span>Registration successful!</span>
  11.       <v-icon dark>mdi-checkbox-marked-circle</v-icon>
  12.     </v-snackbar>
  13.     <v-form ref="form" @submit.prevent="submit">
  14.       <v-container fluid>
  15.         <v-row>
  16.           <v-col cols="12" sm="6">
  17.             <v-text-field
  18.               v-model="form.first"
  19.               :rules="rules.name"
  20.               color="purple darken-2"
  21.               label="First name"
  22.               required
  23.             ></v-text-field>
  24.           </v-col>
  25.           <v-col cols="12" sm="6">
  26.             <v-text-field
  27.               v-model="form.last"
  28.               :rules="rules.name"
  29.               color="blue darken-2"
  30.               label="Last name"
  31.               required
  32.             ></v-text-field>
  33.           </v-col>
  34.           <v-col cols="12">
  35.             <v-textarea
  36.               v-model="form.bio"
  37.               color="teal"
  38.             >
  39.               <template v-slot:label>
  40.                 <div>
  41.                   Bio <small>(optional)</small>
  42.                 </div>
  43.               </template>
  44.             </v-textarea>
  45.           </v-col>
  46.           <v-col cols="12" sm="6">
  47.             <v-select
  48.               v-model="form.favoriteAnimal"
  49.               :items="animals"
  50.               :rules="rules.animal"
  51.               color="pink"
  52.               label="Favorite animal"
  53.               required
  54.             ></v-select>
  55.           </v-col>
  56.           <v-col cols="12" sm="6">
  57.             <v-slider
  58.               v-model="form.age"
  59.               :rules="rules.age"
  60.               color="orange"
  61.               label="Age"
  62.               hint="Be honest"
  63.               min="1"
  64.               max="100"
  65.               thumb-label
  66.             ></v-slider>
  67.           </v-col>
  68.           <v-col cols="12">
  69.             <v-checkbox
  70.               v-model="form.terms"
  71.               color="green"
  72.             >
  73.               <template v-slot:label>
  74.                 <div @click.stop="">
  75.                   Do you accept the
  76.                   <a href="javascript:;" @click.stop="terms = true">terms</a>
  77.                   and
  78.                   <a href="javascript:;" @click.stop="conditions = true">conditions?</a>
  79.                 </div>
  80.               </template>
  81.             </v-checkbox>
  82.           </v-col>
  83.         </v-row>
  84.       </v-container>
  85.       <v-card-actions>
  86.         <v-btn text @click="resetForm">Cancel</v-btn>
  87.         <v-spacer></v-spacer>
  88.         <v-btn
  89.           :disabled="!formIsValid"
  90.           text
  91.           color="primary"
  92.           type="submit"
  93.         >Register</v-btn>
  94.       </v-card-actions>
  95.     </v-form>
  96.     <v-dialog v-model="terms" width="70%">
  97.       <v-card>
  98.         <v-card-title class="title">Terms</v-card-title>
  99.         <v-card-text v-for="n in 5" :key="n">
  100.           {{ content }}
  101.         </v-card-text>
  102.         <v-card-actions>
  103.           <v-spacer></v-spacer>
  104.           <v-btn
  105.             text
  106.             color="purple"
  107.             @click="terms = false"
  108.           >Ok</v-btn>
  109.         </v-card-actions>
  110.       </v-card>
  111.     </v-dialog>
  112.     <v-dialog v-model="conditions" width="70%">
  113.       <v-card>
  114.         <v-card-title class="title">Conditions</v-card-title>
  115.         <v-card-text v-for="n in 5" :key="n">
  116.           {{ content }}
  117.         </v-card-text>
  118.         <v-card-actions>
  119.           <v-spacer></v-spacer>
  120.           <v-btn
  121.             text
  122.             color="purple"
  123.             @click="conditions = false"
  124.           >Ok</v-btn>
  125.         </v-card-actions>
  126.       </v-card>
  127.     </v-dialog>
  128.   </v-card>
  129. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       const defaultForm = Object.freeze({
  5.         first: '',
  6.         last: '',
  7.         bio: '',
  8.         favoriteAnimal: '',
  9.         age: null,
  10.         terms: false,
  11.       })
  13.       return {
  14.         form: Object.assign({}, defaultForm),
  15.         rules: {
  16.           age: [
  17.             val => val < 10 || `I don't believe you!`,
  18.           ],
  19.           animal: [val => (val || '').length > 0 || 'This field is required'],
  20.           name: [val => (val || '').length > 0 || 'This field is required'],
  21.         },
  22.         animals: ['Dog', 'Cat', 'Rabbit', 'Turtle', 'Snake'],
  23.         conditions: false,
  24.         content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.`,
  25.         snackbar: false,
  26.         terms: false,
  27.         defaultForm,
  28.       }
  29.     },
  31.     computed: {
  32.       formIsValid () {
  33.         return (
  34.           this.form.first &&
  35.           this.form.last &&
  36.           this.form.favoriteAnimal &&
  37.           this.form.terms
  38.         )
  39.       },
  40.     },
  42.     methods: {
  43.       resetForm () {
  44.         this.form = Object.assign({}, this.defaultForm)
  45.         this.$refs.form.reset()
  46.       },
  47.       submit () {
  48.         this.snackbar = true
  49.         this.resetForm()
  50.       },
  51.     },
  52.   }
  53. </script>

Text fields（文本框） - 图16

提示文本

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

template

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             label="Your product or service"
  9.             value="Grocery delivery"
  10.             hint="For example, flowers or used cars"
  11.           ></v-text-field>
  12.         </v-col>
  14.         <v-col cols="12" sm="6">
  15.           <v-text-field
  16.             label="Your landing page"
  17.             hint="www.example.com/page"
  18.             persistent-hint
  19.           ></v-text-field>
  20.         </v-col>
  22.         <v-col cols="12" sm="6">
  23.           <v-text-field
  24.             label="Your product or service"
  25.             value="Grocery delivery"
  26.             hint="For example, flowers or used cars"
  27.             filled
  28.           ></v-text-field>
  29.         </v-col>
  31.         <v-col cols="12" sm="6">
  32.           <v-text-field
  33.             label="Your landing page"
  34.             hint="www.example.com/page"
  35.             persistent-hint
  36.             filled
  37.           ></v-text-field>
  38.         </v-col>
  40.         <v-col cols="12" sm="6">
  41.           <v-text-field
  42.             label="Your product or service"
  43.             value="Grocery delivery"
  44.             hint="For example, flowers or used cars"
  45.             outlined
  46.           ></v-text-field>
  47.         </v-col>
  49.         <v-col cols="12" sm="6">
  50.           <v-text-field
  51.             label="Your landing page"
  52.             hint="www.example.com/page"
  53.             persistent-hint
  54.             outlined
  55.           ></v-text-field>
  56.         </v-col>
  58.       </v-row>
  59.     </v-container>
  60.   </v-form>
  61. </template>

Text fields（文本框） - 图17

前缀和后缀

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

template

  1. <template>
  2.   <v-container fluid>
  4.     <v-row>
  5.       <v-col cols="4">
  6.         <v-subheader>Prefix for dollar currency</v-subheader>
  7.       </v-col>
  8.       <v-col cols="8">
  9.         <v-text-field
  10.           label="Amount"
  11.           value="10.00"
  12.           prefix="$"
  13.         ></v-text-field>
  14.       </v-col>
  15.     </v-row>
  17.     <v-row>
  18.       <v-col cols="4">
  19.         <v-subheader>Suffix for weight</v-subheader>
  20.       </v-col>
  21.       <v-col cols="8">
  22.         <v-text-field
  23.           label="Weight"
  24.           value="28.00"
  25.           suffix="lbs"
  26.         ></v-text-field>
  27.       </v-col>
  28.     </v-row>
  30.     <v-row>
  31.       <v-col cols="4">
  32.         <v-subheader>Suffix for email domain</v-subheader>
  33.       </v-col>
  34.       <v-col cols="8">
  35.         <v-text-field
  36.           label="Email address"
  37.           value="example"
  38.           suffix="@gmail.com"
  39.         ></v-text-field>
  40.       </v-col>
  41.     </v-row>
  43.     <v-row>
  44.       <v-col cols="4">
  45.         <v-subheader>Suffix for time zone</v-subheader>
  46.       </v-col>
  47.       <v-col cols="8">
  48.         <v-text-field
  49.           label="Label Text"
  50.           value="12:30:00"
  51.           type="time"
  52.           suffix="PST"
  53.         ></v-text-field>
  54.       </v-col>
  55.     </v-row>
  57.   </v-container>
  58. </template>

Text fields（文本框） - 图18

图标事件

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12">
  7.           <v-text-field
  8.             v-model="message"
  9.             :append-icon="marker ? 'mdi-map-marker' : 'mdi-map-marker-off'"
  10.             :append-outer-icon="message ? 'mdi-send' : 'mdi-microphone'"
  11.             :prepend-icon="icon"
  12.             filled
  13.             clear-icon="mdi-close-circle"
  14.             clearable
  15.             label="Message"
  16.             type="text"
  17.             @click:append="toggleMarker"
  18.             @click:append-outer="sendMessage"
  19.             @click:prepend="changeIcon"
  20.             @click:clear="clearMessage"
  21.           ></v-text-field>
  22.         </v-col>
  24.       </v-row>
  25.     </v-container>
  26.   </v-form>
  27. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       password: 'Password',
  5.       show: false,
  6.       message: 'Hey!',
  7.       marker: true,
  8.       iconIndex: 0,
  9.       icons: [
  10.         'mdi-emoticon',
  11.         'mdi-emoticon-cool',
  12.         'mdi-emoticon-dead',
  13.         'mdi-emoticon-excited',
  14.         'mdi-emoticon-happy',
  15.         'mdi-emoticon-neutral',
  16.         'mdi-emoticon-sad',
  17.         'mdi-emoticon-tongue',
  18.       ],
  19.     }),
  21.     computed: {
  22.       icon () {
  23.         return this.icons[this.iconIndex]
  24.       },
  25.     },
  27.     methods: {
  28.       toggleMarker () {
  29.         this.marker = !this.marker
  30.       },
  31.       sendMessage () {
  32.         this.resetIcon()
  33.         this.clearMessage()
  34.       },
  35.       clearMessage () {
  36.         this.message = ''
  37.       },
  38.       resetIcon () {
  39.         this.iconIndex = 0
  40.       },
  41.       changeIcon () {
  42.         this.iconIndex === this.icons.length - 1
  43.           ? this.iconIndex = 0
  44.           : this.iconIndex++
  45.       },
  46.     },
  47.   }
  48. </script>

Text fields（文本框） - 图19

图标插槽

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  5.         <v-col cols="12">
  6.           <v-text-field
  7.             v-model="message"
  8.             outlined
  9.             clearable
  10.             label="Message"
  11.             type="text"
  12.           >
  13.             <template v-slot:prepend>
  14.               <v-tooltip
  15.                 bottom
  16.               >
  17.                 <template v-slot:activator="{ on }">
  18.                   <v-icon v-on="on">mdi-help-circle-outline</v-icon>
  19.                 </template>
  20.                 I'm a tooltip
  21.               </v-tooltip>
  22.             </template>
  23.             <template v-slot:append>
  24.               <v-fade-transition leave-absolute>
  25.                 <v-progress-circular
  26.                   v-if="loading"
  27.                   size="24"
  28.                   color="info"
  29.                   indeterminate
  30.                 ></v-progress-circular>
  31.                 <img v-else width="24" height="24" src="https://cdn.vuetifyjs.com/images/logos/v-alt.svg" alt="">
  32.               </v-fade-transition>
  33.             </template>
  34.             <template v-slot:append-outer>
  35.               <v-menu
  36.                 style="top: -12px"
  37.                 offset-y
  38.               >
  39.                 <template v-slot:activator="{ on }">
  40.                   <v-btn v-on="on">
  41.                     <v-icon left>mdi-menu</v-icon>
  42.                     Menu
  43.                   </v-btn>
  44.                 </template>
  45.                 <v-card>
  46.                   <v-card-text class="pa-6">
  47.                     <v-btn large flat color="primary" @click="clickMe"><v-icon left>mdi-target</v-icon>Click me</v-btn>
  48.                   </v-card-text>
  49.                 </v-card>
  50.               </v-menu>
  51.             </template>
  52.           </v-text-field>
  53.         </v-col>
  55.       </v-row>
  56.     </v-container>
  57.   </v-form>
  58. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       message: 'Hey!',
  5.       loading: false,
  6.     }),
  8.     methods: {
  9.       clickMe () {
  10.         this.loading = true
  11.         this.message = 'Wait for it...'
  12.         setTimeout(() => {
  13.           this.loading = false
  14.           this.message = 'You\'ve clicked me!'
  15.         }, 2000)
  16.       },
  17.     },
  18.   }
  19. </script>

Text fields（文本框） - 图20

标签插槽

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

template

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-text-field>
  5.         <template v-slot:label>
  6.           What about <strong>icon</strong> here? <v-icon style="vertical-align: middle">find_in_page</v-icon>
  7.         </template>
  8.       </v-text-field>
  9.     </v-container>
  10.   </v-form>
  11. </template>

Text fields（文本框） - 图21

验证

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-container>
  4.       <v-row>
  6.         <v-col cols="12" sm="6">
  7.           <v-text-field
  8.             v-model="title"
  9.             :rules="[rules.required, rules.counter]"
  10.             label="Title"
  11.             counter
  12.             maxlength="20"
  13.           ></v-text-field>
  14.         </v-col>
  16.         <v-col cols="12" sm="6">
  17.           <v-text-field
  18.             v-model="email"
  19.             :rules="[rules.required, rules.email]"
  20.             label="E-mail"
  21.           ></v-text-field>
  22.         </v-col>
  24.       </v-row>
  25.     </v-container>
  26.   </v-form>
  27. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         title: 'Preliminary report',
  6.         email: '',
  7.         rules: {
  8.           required: value => !!value || 'Required.',
  9.           counter: value => value.length <= 20 || 'Max 20 characters',
  10.           email: value => {
  11.             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,}))$/
  12.             return pattern.test(value) || 'Invalid e-mail.'
  13.           },
  14.         },
  15.       }
  16.     },
  17.   }
  18. </script>

Text fields（文本框） - 图22

带计数器的全宽文本框

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

template script

  1. <template>
  2.   <v-form>
  3.     <v-autocomplete
  4.       v-model="selected"
  5.       :items="['Trevor Handsen', 'Alex Nelson']"
  6.       chips
  7.       label="To"
  8.       full-width
  9.       hide-details
  10.       hide-no-data
  11.       hide-selected
  12.       multiple
  13.       single-line
  14.     ></v-autocomplete>
  15.     <v-divider></v-divider>
  16.     <v-text-field
  17.       label="Subject"
  18.       value="Plans for the weekend"
  19.       single-line
  20.       full-width
  21.       hide-details
  22.     ></v-text-field>
  23.     <v-divider></v-divider>
  24.     <v-textarea
  25.       v-model="title"
  26.       label="Message"
  27.       counter
  28.       maxlength="120"
  29.       full-width
  30.       single-line
  31.     ></v-textarea>
  32.   </v-form>
  33. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         selected: ['Trevor Handsen'],
  6.         items: ['Trevor Handsen', 'Alex Nelson'],
  7.         title: 'Hi,\nI just wanted to check in and see if you had any plans the upcoming weekend. We are thinking of heading up to Napa',
  8.       }
  9.     },
  10.   }
  11. </script>

Text fields（文本框） - 图23

进度条

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

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-checkbox v-model="custom" label="Custom progress bar"></v-checkbox>
  4.     <v-text-field
  5.       v-model="value"
  6.       color="cyan darken"
  7.       label="Text field"
  8.       placeholder="Start typing..."
  9.       loading
  10.     >
  11.       <template v-slot:progress>
  12.         <v-progress-linear
  13.           v-if="custom"
  14.           :value="progress"
  15.           :color="color"
  16.           absolute
  17.           height="7"
  18.         ></v-progress-linear>
  19.       </template>
  20.     </v-text-field>
  21.   </v-container>
  22. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       value: '',
  5.       custom: true,
  6.     }),
  7.     computed: {
  8.       progress () {
  9.         return Math.min(100, this.value.length * 10)
  10.       },
  11.       color () {
  12.         return ['error', 'warning', 'success'][Math.floor(this.progress / 40)]
  13.       },
  14.     },
  15.   }
  16. </script>

Text fields（文本框） - 图24

自定义验证

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

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-col cols="12" sm="10" md="8" lg="6">
  4.       <v-card ref="form">
  5.         <v-card-text>
  6.           <v-text-field
  7.             ref="name"
  8.             v-model="name"
  9.             :rules="[() => !!name || 'This field is required']"
  10.             :error-messages="errorMessages"
  11.             label="Full Name"
  12.             placeholder="John Doe"
  13.             required
  14.           ></v-text-field>
  15.           <v-text-field
  16.             ref="address"
  17.             v-model="address"
  18.             :rules="[
  19.               () => !!address || 'This field is required',
  20.               () => !!address && address.length <= 25 || 'Address must be less than 25 characters',
  21.               addressCheck
  22.             ]"
  23.             label="Address Line"
  24.             placeholder="Snowy Rock Pl"
  25.             counter="25"
  26.             required
  27.           ></v-text-field>
  28.           <v-text-field
  29.             ref="city"
  30.             v-model="city"
  31.             :rules="[() => !!city || 'This field is required', addressCheck]"
  32.             label="City"
  33.             placeholder="El Paso"
  34.             required
  35.           ></v-text-field>
  36.           <v-text-field
  37.             ref="state"
  38.             v-model="state"
  39.             :rules="[() => !!state || 'This field is required']"
  40.             label="State/Province/Region"
  41.             required
  42.             placeholder="TX"
  43.           ></v-text-field>
  44.           <v-text-field
  45.             ref="zip"
  46.             v-model="zip"
  47.             :rules="[() => !!zip || 'This field is required']"
  48.             label="ZIP / Postal Code"
  49.             required
  50.             placeholder="79938"
  51.           ></v-text-field>
  52.           <v-autocomplete
  53.             ref="country"
  54.             v-model="country"
  55.             :rules="[() => !!country || 'This field is required']"
  56.             :items="countries"
  57.             label="Country"
  58.             placeholder="Select..."
  59.             required
  60.           ></v-autocomplete>
  61.         </v-card-text>
  62.         <v-divider class="mt-12"></v-divider>
  63.         <v-card-actions>
  64.           <v-btn text>Cancel</v-btn>
  65.           <v-spacer></v-spacer>
  66.           <v-slide-x-reverse-transition>
  67.             <v-tooltip
  68.               v-if="formHasErrors"
  69.               left
  70.             >
  71.               <template v-slot:activator="{ on }">
  72.                 <v-btn
  73.                   icon
  74.                   class="my-0"
  75.                   @click="resetForm"
  76.                   v-on="on"
  77.                 >
  78.                   <v-icon>mdi-refresh</v-icon>
  79.                 </v-btn>
  80.               </template>
  81.               <span>Refresh form</span>
  82.             </v-tooltip>
  83.           </v-slide-x-reverse-transition>
  84.           <v-btn color="primary" text @click="submit">Submit</v-btn>
  85.         </v-card-actions>
  86.       </v-card>
  87.     </v-col>
  88.   </v-row>
  89. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       countries: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Anguilla', 'Antigua &amp; Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia &amp; Herzegovina', 'Botswana', 'Brazil', 'British Virgin Islands', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Cape Verde', 'Cayman Islands', 'Chad', 'Chile', 'China', 'Colombia', 'Congo', 'Cook Islands', 'Costa Rica', 'Cote D Ivoire', 'Croatia', 'Cruise Ship', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Estonia', 'Ethiopia', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Polynesia', 'French West Indies', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Greece', 'Greenland', 'Grenada', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jersey', 'Jordan', 'Kazakhstan', 'Kenya', 'Kuwait', 'Kyrgyz Republic', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Mauritania', 'Mauritius', 'Mexico', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Montserrat', 'Morocco', 'Mozambique', 'Namibia', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Palestine', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russia', 'Rwanda', 'Saint Pierre &amp; Miquelon', 'Samoa', 'San Marino', 'Satellite', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'South Africa', 'South Korea', 'Spain', 'Sri Lanka', 'St Kitts &amp; Nevis', 'St Lucia', 'St Vincent', 'St. Lucia', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', "Timor L'Este", 'Togo', 'Tonga', 'Trinidad &amp; Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks &amp; Caicos', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Venezuela', 'Vietnam', 'Virgin Islands (US)', 'Yemen', 'Zambia', 'Zimbabwe'],
  5.       errorMessages: '',
  6.       name: null,
  7.       address: null,
  8.       city: null,
  9.       state: null,
  10.       zip: null,
  11.       country: null,
  12.       formHasErrors: false,
  13.     }),
  15.     computed: {
  16.       form () {
  17.         return {
  18.           name: this.name,
  19.           address: this.address,
  20.           city: this.city,
  21.           state: this.state,
  22.           zip: this.zip,
  23.           country: this.country,
  24.         }
  25.       },
  26.     },
  28.     watch: {
  29.       name () {
  30.         this.errorMessages = ''
  31.       },
  32.     },
  34.     methods: {
  35.       addressCheck () {
  36.         this.errorMessages = this.address && !this.name
  37.           ? 'Hey! I\'m required'
  38.           : ''
  40.         return true
  41.       },
  42.       resetForm () {
  43.         this.errorMessages = []
  44.         this.formHasErrors = false
  46.         Object.keys(this.form).forEach(f => {
  47.           this.$refs[f].reset()
  48.         })
  49.       },
  50.       submit () {
  51.         this.formHasErrors = false
  53.         Object.keys(this.form).forEach(f => {
  54.           if (!this.form[f]) this.formHasErrors = true
  56.           this.$refs[f].validate(true)
  57.         })
  58.       },
  59.     },
  60.   }
  61. </script>

Text fields（文本框） - 图25