多行文本框

多行文本框组件用于收集大量文本数据。

用例

v-textarea 最简单的形式是多行文本字段，可用于大量文本。

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12" md="6">
  5.         <v-textarea
  6.           name="input-7-1"
  7.           label="Default style"
  8.           value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
  9.           hint="Hint text"
  10.         ></v-textarea>
  11.       </v-col>
  12.       <v-col cols="12" md="6">
  13.         <v-textarea
  14.           solo
  15.           name="input-7-4"
  16.           label="Solo textarea"
  17.         ></v-textarea>
  18.       </v-col>
  19.       <v-col cols="12" md="6">
  20.         <v-textarea
  21.           filled
  22.           name="input-7-4"
  23.           label="Filled textarea"
  24.           value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
  25.         ></v-textarea>
  26.       </v-col>
  27.       <v-col cols="12" md="6">
  28.         <v-textarea
  29.           outlined
  30.           name="input-7-4"
  31.           label="Outlined textarea"
  32.           value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
  33.         ></v-textarea>
  34.       </v-col>
  35.     </v-row>
  36.   </v-container>
  37. </template>

Textareas（多行文本框） - 图1

API

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

Textareas（多行文本框） - 图2

实战场

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col
  5.         sm="6"
  6.         cols="12"
  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>
  22.       <v-col cols="12" sm="6">
  23.         <v-text-field
  24.           v-model="rowHeight"
  25.           :disabled="!autoGrow"
  26.           class="mx-4"
  27.           label="Row height - px"
  28.           max="500"
  29.           min="1"
  30.           step="1"
  31.           style="width: 125px"
  32.           type="number"
  33.         ></v-text-field>
  34.         <v-text-field
  35.           v-model="rows"
  36.           class="mx-4"
  37.           label="Rows"
  38.           max="50"
  39.           min="1"
  40.           step="1"
  41.           style="width: 125px"
  42.           type="number"
  43.         ></v-text-field>
  44.       </v-col>
  46.       <v-col cols="12"></v-col>
  48.       <v-col cols="12" md="6">
  49.         <v-switch
  50.           v-model="autoGrow"
  51.           class="ma-1"
  52.           label="Auto-grow"
  53.         ></v-switch>
  54.         <v-switch
  55.           v-model="clearable"
  56.           class="ma-1"
  57.           label="Clearable"
  58.         ></v-switch>
  60.         <v-switch
  61.           v-model="filled"
  62.           class="ma-1"
  63.           label="Filled"
  64.         ></v-switch>
  65.         <v-switch
  66.           v-model="flat"
  67.           class="ma-1"
  68.           label="Flat (requires Solo)"
  69.           :disabled="!solo"
  70.         ></v-switch>
  71.         <v-switch
  72.           v-model="loading"
  73.           class="ma-1"
  74.           label="Loading"
  75.         ></v-switch>
  76.         <v-switch
  77.           v-model="outlined"
  78.           class="ma-1"
  79.           label="Outlined"
  80.         ></v-switch>
  81.         <v-switch
  82.           v-model="persistentHint"
  83.           class="ma-1"
  84.           label="Persistent Hint"
  85.         ></v-switch>
  86.         <v-switch
  87.           v-model="rounded"
  88.           class="ma-1"
  89.           label="Rounded (requires Filled or Outlined)"
  90.         ></v-switch>
  91.         <v-switch
  92.           v-model="shaped"
  93.           class="ma-1"
  94.           label="Shaped (requires Filled or Outlined)"
  95.         ></v-switch>
  96.         <v-switch
  97.           v-model="singleLine"
  98.           class="ma-1"
  99.           label="Single-line"
  100.         ></v-switch>
  101.         <v-switch
  102.           v-model="solo"
  103.           class="ma-1"
  104.           label="Solo"
  105.         ></v-switch>
  106.       </v-col>
  108.       <v-col
  109.         cols="12"
  110.         md="6"
  111.       >
  112.         <v-sheet
  113.           elevation="12"
  114.           class="pa-12"
  115.         >
  116.           <v-textarea
  117.             v-model="model"
  118.             :auto-grow="autoGrow"
  119.             :clearable="clearable"
  120.             :counter="counter ? counter : false"
  121.             :filled="filled"
  122.             :flat="flat"
  123.             :hint="hint"
  124.             :label="label"
  125.             :loading="loading"
  126.             :no-resize="noResize"
  127.             :outlined="outlined"
  128.             :persistent-hint="persistentHint"
  129.             :placeholder="placeholder"
  130.             :rounded="rounded"
  131.             :row-height="rowHeight"
  132.             :rows="rows"
  133.             :shaped="shaped"
  134.             :single-line="singleLine"
  135.             :solo="solo"
  136.           ></v-textarea>
  137.           <div class="mt-12 text-center">
  138.             Value: {{ model }}
  139.           </div>
  140.         </v-sheet>
  141.       </v-col>
  142.     </v-row>
  143.   </v-container>
  144. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       autoGrow: false,
  5.       autofocus: true,
  6.       clearable: false,
  7.       counter: 0,
  8.       filled: false,
  9.       flat: false,
  10.       hint: '',
  11.       label: '',
  12.       loading: false,
  13.       model: 'I\'m a textarea.',
  14.       noResize: false,
  15.       outlined: false,
  16.       persistentHint: false,
  17.       placeholder: '',
  18.       rounded: false,
  19.       rowHeight: 24,
  20.       rows: 1,
  21.       shaped: false,
  22.       singleLine: false,
  23.       solo: false,
  24.     }),
  25.   }
  26. </script>

Textareas（多行文本框） - 图3

示例

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

图标

append-icon 和 prepend-icon 属性有助于将上下文添加到 v-textarea。

template

  1. <template>
  2.   <v-container>
  3.     <v-row>
  4.       <v-col cols="12" sm="6">
  5.         <v-textarea
  6.           class="mx-2"
  7.           label="prepend-icon"
  8.           rows="1"
  9.           prepend-icon="comment"
  10.         ></v-textarea>
  11.       </v-col>
  12.       <v-col cols="12" sm="6">
  13.         <v-textarea
  14.           append-icon="comment"
  15.           class="mx-2"
  16.           label="append-icon"
  17.           rows="1"
  18.         ></v-textarea>
  19.       </v-col>
  20.       <v-col cols="12" sm="6">
  21.         <v-textarea
  22.           prepend-inner-icon="comment"
  23.           class="mx-2"
  24.           label="prepend-inner-icon"
  25.           rows="1"
  26.         ></v-textarea>
  27.       </v-col>
  28.       <v-col cols="12" sm="6">
  29.         <v-textarea
  30.           append-outer-icon="comment"
  31.           class="mx-2"
  32.           label="append-outer-icon"
  33.           rows="1"
  34.         ></v-textarea>
  35.       </v-col>
  36.     </v-row>
  37.   </v-container>
  38. </template>

Textareas（多行文本框） - 图4

自动增长

当使用 auto-grow 属性时，当包含的文本超过其大小时，多行文本框的大小将自动增加。

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-textarea
  4.       name="input-7-1"
  5.       filled
  6.       label="Label"
  7.       auto-grow
  8.       value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
  9.     ></v-textarea>
  10.   </v-container>
  11. </template>

Textareas（多行文本框） - 图5

背景颜色

background-color 和 color 属性让您更好地控制样式 v-textarea 的样式。

template

  1. <template>
  2.   <v-container>
  3.     <v-textarea
  4.       background-color="light-blue"
  5.       color="black"
  6.       label="Label"
  7.     ></v-textarea>
  9.     <v-textarea
  10.       background-color="grey lighten-2"
  11.       color="cyan"
  12.       label="Label"
  13.     ></v-textarea>
  15.     <v-textarea
  16.       background-color="amber lighten-4"
  17.       color="orange orange-darken-4"
  18.       label="Label"
  19.     ></v-textarea>
  20.   </v-container>
  21. </template>

Textareas（多行文本框） - 图6

浏览器自动完成

autocomplete 属性为您提供使浏览器能够预测用户输入的选项。

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-textarea
  4.       autocomplete="email"
  5.       label="Email"
  6.     ></v-textarea>
  7.   </v-container>
  8. </template>

Textareas（多行文本框） - 图7

可清除

您可以使用 clearable 属性清除 v-textarea 中的文本，并自定义与 clearable-icon 属性一起使用的图标。

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-textarea
  4.       clearable
  5.       clear-icon="cancel"
  6.       label="Text"
  7.       value="This is clearable text."
  8.     ></v-textarea>
  9.   </v-container>
  10. </template>

Textareas（多行文本框） - 图8

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)

计数器

counter 属性通知用户 v-textarea 的字符数限制。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-textarea
  4.       counter
  5.       label="Text"
  6.       :rules="rules"
  7.       :value="value"
  8.     ></v-textarea>
  9.   </v-container>
  10. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       rules: [v => v.length <= 25 || 'Max 25 characters'],
  5.       value: 'Hello!',
  6.     }),
  7.   }
  8. </script>

Textareas（多行文本框） - 图9

没有调整大小

v-textarea 使用 no-resize 属性，可以选择保持大小不变​​，而不管其内容的大小如何。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-textarea
  4.       label="Text"
  5.       no-resize
  6.       rows="1"
  7.       :value="value"
  8.     ></v-textarea>
  9.   </v-container>
  10. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  5.     }),
  6.   }
  7. </script>

Textareas（多行文本框） - 图10

行

rows 属性可让您定义文本区域有多少行，当与 row-height 属性结合使用时，您可以通过定义行的高度进一步自定义行。

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12" sm="6">
  5.         <v-textarea
  6.           label="One row"
  7.           auto-grow
  8.           outlined
  9.           rows="1"
  10.           row-height="15"
  11.         ></v-textarea>
  12.       </v-col>
  13.       <v-col cols="12" sm="6">
  14.         <v-textarea
  15.           filled
  16.           auto-grow
  17.           label="Two rows"
  18.           rows="2"
  19.           row-height="20"
  20.         ></v-textarea>
  21.       </v-col>
  22.       <v-col cols="12" sm="6">
  23.         <v-textarea
  24.           label="Three rows"
  25.           auto-grow
  26.           outlined
  27.           rows="3"
  28.           row-height="25"
  29.           shaped
  30.         ></v-textarea>
  31.       </v-col>
  32.       <v-col cols="12" sm="6">
  33.         <v-textarea
  34.           filled
  35.           auto-grow
  36.           label="Four rows"
  37.           rows="4"
  38.           row-height="30"
  39.           shaped
  40.         ></v-textarea>
  41.       </v-col>
  42.     </v-row>
  43.   </v-container>
  44. </template>

Textareas（多行文本框） - 图11

美丽的表单

利用替代的输入样式，您可以创建易于构建和使用的惊人界面。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     style="max-width: 500px;"
  5.   >
  6.     <v-system-bar
  7.       color="deep-purple darken-4"
  8.       dark
  9.     >
  10.       <v-spacer></v-spacer>
  11.       <v-icon small>mdi-square</v-icon>
  12.       <v-icon
  13.         class="ml-1"
  14.         small
  15.       >mdi-circle</v-icon>
  16.       <v-icon
  17.         class="ml-1"
  18.         small
  19.       >mdi-triangle</v-icon>
  20.     </v-system-bar>
  21.     <v-toolbar
  22.       color="deep-purple accent-4"
  23.       cards
  24.       dark
  25.       flat
  26.     >
  27.       <v-btn icon>
  28.         <v-icon>mdi-arrow-left</v-icon>
  29.       </v-btn>
  30.       <v-card-title class="title font-weight-regular">Sign up</v-card-title>
  31.       <v-spacer></v-spacer>
  32.       <v-btn icon>
  33.         <v-icon>mdi-magnify</v-icon>
  34.       </v-btn>
  35.       <v-btn icon>
  36.         <v-icon>mdi-dots-vertical</v-icon>
  37.       </v-btn>
  38.     </v-toolbar>
  39.     <v-form
  40.       ref="form"
  41.       v-model="form"
  42.       class="pa-4 pt-6"
  43.     >
  44.       <v-text-field
  45.         v-model="password"
  46.         :rules="[rules.password, rules.length(6)]"
  47.         filled
  48.         color="deep-purple"
  49.         counter="6"
  50.         label="Password"
  51.         style="min-height: 96px"
  52.         type="password"
  53.       ></v-text-field>
  54.       <v-text-field
  55.         v-model="phone"
  56.         filled
  57.         color="deep-purple"
  58.         label="Phone number"
  59.       ></v-text-field>
  60.       <v-text-field
  61.         v-model="email"
  62.         :rules="[rules.email]"
  63.         filled
  64.         color="deep-purple"
  65.         label="Email address"
  66.         type="email"
  67.       ></v-text-field>
  68.       <v-textarea
  69.         v-model="bio"
  70.         auto-grow
  71.         filled
  72.         color="deep-purple"
  73.         label="Bio"
  74.         rows="1"
  75.       ></v-textarea>
  76.       <v-checkbox
  77.         v-model="agreement"
  78.         :rules="[rules.required]"
  79.         color="deep-purple"
  80.       >
  81.         <template v-slot:label>
  82.           I agree to the&nbsp;
  83.           <a href="#" @click.stop.prevent="dialog = true">Terms of Service</a>
  84.           &nbsp;and&nbsp;
  85.           <a href="#" @click.stop.prevent="dialog = true">Privacy Policy</a>*
  86.         </template>
  87.       </v-checkbox>
  88.     </v-form>
  89.     <v-divider></v-divider>
  90.     <v-card-actions>
  91.       <v-btn
  92.         text
  93.         @click="$refs.form.reset()"
  94.       >
  95.         Clear
  96.       </v-btn>
  97.       <v-spacer></v-spacer>
  98.       <v-btn
  99.         :disabled="!form"
  100.         :loading="isLoading"
  101.         class="white--text"
  102.         color="deep-purple accent-4"
  103.         depressed
  104.       >Submit</v-btn>
  105.     </v-card-actions>
  106.     <v-dialog
  107.       v-model="dialog"
  108.       absolute
  109.       max-width="400"
  110.       persistent
  111.     >
  112.       <v-card>
  113.         <v-card-title class="headline grey lighten-3">Legal</v-card-title>
  114.         <v-card-text>
  115.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  116.         </v-card-text>
  117.         <v-divider></v-divider>
  118.         <v-card-actions>
  119.           <v-btn
  120.             text
  121.             @click="agreement = false, dialog = false"
  122.           >
  123.             No
  124.           </v-btn>
  125.           <v-spacer></v-spacer>
  126.           <v-btn
  127.             class="white--text"
  128.             color="deep-purple accent-4"
  129.             @click="agreement = true, dialog = false"
  130.           >
  131.             Yes
  132.           </v-btn>
  133.         </v-card-actions>
  134.       </v-card>
  135.     </v-dialog>
  136.   </v-card>
  137. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       agreement: false,
  5.       bio: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts',
  6.       dialog: false,
  7.       email: undefined,
  8.       form: false,
  9.       isLoading: false,
  10.       password: undefined,
  11.       phone: undefined,
  12.       rules: {
  13.         email: v => (v || '').match(/@/) || 'Please enter a valid email',
  14.         length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
  15.         password: v => (v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
  16.           'Password must contain an upper case letter, a numeric character, and a special character',
  17.         required: v => !!v || 'This field is required',
  18.       },
  19.     }),
  20.   }
  21. </script>

Textareas（多行文本框） - 图12