Textarea 文本域
新粗野主义风格多行文本输入框，支持变体、尺寸和 v-model。
预览
变体
尺寸
状态
v-model 绑定
值：
安装
pnpm dlx brutx-vue@latest add textarea用法
<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'
const message = ref('')
</script>
<template>
<Textarea v-model="message" placeholder="Type your message here..." />
</template>带标签
<script setup>
import { ref } from 'vue'
import { Textarea, Label } from 'brutx-ui-vue'
const bio = ref('')
</script>
<template>
<div class="space-y-2">
<Label for="bio">Bio</Label>
<Textarea id="bio" v-model="bio" placeholder="Tell us about yourself..." />
</div>
</template>禁用状态
<script setup>
import { Textarea } from 'brutx-ui-vue'
</script>
<template>
<Textarea disabled placeholder="Disabled textarea" />
</template>只读状态
通过 readonly 属性设置只读文本域。只读状态下文本域不可编辑但可聚焦选择文本，光标样式为 cursor-default，不会降低透明度（区别于 disabled）。
<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'
const content = ref('这是一段只读内容，用户可以选中和复制文本，但无法修改。适用于展示协议条款、历史记录等场景。')
</script>
<template>
<Textarea v-model="content" readonly />
</template>错误消息
通过 variant="error" 和 errorMessage 属性显示错误消息。错误消息使用 role="alert" 确保屏幕阅读器自动播报。
<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'
const message = ref('')
</script>
<template>
<Textarea
v-model="message"
variant="error"
error-message="消息内容不能为空"
placeholder="请输入消息..."
/>
</template>变体
| 变体 | 说明 |
|---|---|
default | 标准边框 |
error | 危险色边框，主色聚焦阴影 |
success | 成功色边框，辅助色聚焦阴影 |
通过 variant 属性设置不同的边框样式：
<template>
<Textarea variant="default" placeholder="Default variant" />
<Textarea variant="error" placeholder="Error variant" />
<Textarea variant="success" placeholder="Success variant" />
</template>尺寸
| 尺寸 | 内边距 | 字体大小 |
|---|---|---|
sm | px-3 py-2 | text-sm |
default | px-4 py-3 | text-base |
lg | px-5 py-4 | text-lg |
通过 size 属性设置不同的尺寸：
<template>
<Textarea size="sm" placeholder="Small size" />
<Textarea size="default" placeholder="Default size" />
<Textarea size="lg" placeholder="Large size" />
</template>程序化控制
通过 ref 访问组件实例后可调用以下方法：
<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'
const textareaRef = ref(null)
function handleFocus() {
textareaRef.value?.focus()
}
</script>
<template>
<Textarea ref="textareaRef" placeholder="Click button to focus" />
<button @click="handleFocus">Focus Textarea</button>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | string | undefined | undefined | 文本域的字符串值，通过 v-model 同步。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
variant | "default" | "error" | "success" | undefined | "default" | 文本域的边框和状态样式；error 配合非空 errorMessage 显示错误提示。 |
详情声明类型NonNullable<"default" | "success" | "error" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 文本域的尺寸变体，控制高度、内边距和文字大小。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
resize | "both" | "horizontal" | "none" | "vertical" | undefined | "none" | 浏览器允许用户拖动调整文本域尺寸的方向。 |
详情声明类型NonNullable<"vertical" | "horizontal" | "none" | "both" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
disabled | boolean | undefined | false | 禁用原生文本域，阻止聚焦和编辑。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
readonly | boolean | undefined | false | 保留聚焦、文本选择与复制能力，同时阻止用户编辑。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
placeholder | string | undefined | undefined运行时回退: | 文本域为空时显示的提示文本。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
errorMessage | string | undefined | undefined | variant 为 error 且文本非空时，在文本域下方通过 role="alert" 显示的错误消息。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
ariaLabel | string | undefined | undefined | 传给原生文本域的无障碍名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
ariaLabelledby | string | undefined | undefined | 为原生文本域提供标签的元素 ID。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
ariaDescribedby | string | undefined | undefined | 描述元素的 ID；未提供且显示错误提示时自动关联错误消息。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
ariaInvalid | boolean | undefined | undefined | 显式设置无效状态；未提供且显示错误提示时为真。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
ariaErrormessage | string | undefined | undefined | 错误消息元素的 ID，同时用作内置错误消息的 ID；未提供时内置消息使用自动生成的 ID。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
ariaRequired | boolean | undefined | undefined | 向辅助技术声明文本域的必填状态。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
class | string | undefined | undefined | 合并到原生 textarea 元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/textarea/Textarea.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@update:modelValue | [value: string] | 用户输入时发出新的字符串值；输入法组合期间不发出中间值，组合结束时提交最终值。 |
详情声明类型[value: string] 来源packages/ui/src/components/textarea/Textarea.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
focus | () => void | undefined | 将焦点移到原生文本域。 |
详情声明类型() => void | undefined 来源packages/ui/src/components/textarea/Textarea.vue | ||
blur | () => void | undefined | 从原生文本域移除焦点。 |
详情声明类型() => void | undefined 来源packages/ui/src/components/textarea/Textarea.vue | ||
select | () => void | undefined | 选中原生文本域中的文本。 |
详情声明类型() => void | undefined 来源packages/ui/src/components/textarea/Textarea.vue | ||
ref | Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null> | 内部原生文本域引用；Vue 会在公开组件实例上解包顶层 Ref，可通过实例的 ref 读取 HTMLTextAreaElement。 |
详情声明类型Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null> 字面量
来源packages/ui/src/components/textarea/Textarea.vue | ||
可访问性
- ARIA 属性：支持
aria-label、aria-labelledby、aria-describedby、aria-invalid、aria-required属性，便于辅助技术（如屏幕阅读器）正确朗读
<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'
const bio = ref('')
</script>
<template>
<Textarea
v-model="bio"
aria-label="个人简介"
aria-required="true"
aria-invalid="false"
placeholder="请输入个人简介..."
/>
</template>样式定制
Textarea 默认设置了 resize-none。如需允许调整大小，可通过自定义 class 覆盖：
<script setup>
import { Textarea } from 'brutx-ui-vue'
</script>
<template>
<Textarea class="resize-y" placeholder="Resizable textarea" />
</template>