文本域为标准文本域元素添加了样式、键值过滤和自动调整大小功能。
import Textarea from 'primevue/textarea';
文本域与 v-model 属性一起使用，用于双向值绑定。
<Textarea v-model="value" rows="5" cols="30" />
文本域与 PrimeVue 表单库无缝集成。
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-1">
<Textarea name="address" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
启用 autoResize 时，文本域会增长而不是显示滚动条。
<Textarea v-model="value" autoResize rows="5" cols="30" />
将 variant 属性指定为 filled，以显示组件，其视觉强调高于默认的 outlined 样式。
<Textarea v-model="value" variant="filled" rows="5" cols="30" />
浮动标签在聚焦时出现在输入字段的顶部。有关更多信息，请访问 浮动标签 文档。
<FloatLabel>
<Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
<label for="on_label">On Label</label>
</FloatLabel>
IftaLabel 用于创建内嵌顶部对齐标签。有关更多信息，请访问 IftaLabel 文档。
<IftaLabel>
<Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
<label for="description">Description</label>
</IftaLabel>
IftaLabel 用于创建内嵌顶部对齐标签。有关更多信息，请访问 IftaLabel 文档。
<IftaLabel>
<Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
<label for="description">Description</label>
</IftaLabel>
文本域提供了 small 和 large 尺寸作为基本尺寸的替代方案。
<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
<Textarea v-model="value2" placeholder="Normal" rows="3" />
<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
使用 invalid 属性显示无效状态，以指示验证失败。在与表单验证库集成时，可以使用此样式。
<Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
当存在 disabled 时，元素无法编辑和聚焦。
<Textarea v-model="value" rows="5" cols="30" disabled />
文本域组件呈现一个原生文本域元素，该元素隐式包含任何传递的属性。用于描述组件的值可以通过与 id 属性组合的 label 标签或使用 aria-labelledby、aria-label 属性来提供。
<label for="address1">Address 1</label>
<Textarea id="address1" />
<span id="address2">Address 2</span>
<Textarea aria-labelledby="address2" />
<Textarea aria-label="Address Details"/>
| 键 | 功能 |
|---|---|
| tab | 将焦点移动到输入。 |