Textarea 文本域

用于多行文本输入，支持多种变体、自适应高度、字数统计、清除等功能。

基础用法

通过 v-model 双向绑定数据：

当前值：（空）

文本域变体

提供 outline、filled、borderless 三种样式变体：

Outline

Filled

Borderless

不同尺寸

设置 size 属性使用三种预设尺寸：

带标签与必填

设置 label 显示标签，required 显示必填标记：

个人简介 *

备注信息

自适应高度

设置 autoSize 为 true 或对象 { minRows, maxRows } 自动调整高度：

自动适应（无限制）

限制 2~6 行

字数统计

设置 maxlength 和 showCount 显示字数统计：

0/100

0/200

可清除

设置 clearable 属性，输入框有值时右上角显示清除按钮：

错误状态

设置 error 属性显示错误提示：

反馈内容

反馈内容不能为空

状态与提示

通过 status 设定状态，statusText 显示状态提示文本：

内容不符合要求

请注意字数限制

可调整大小

设置 resizable 允许用户拖拽调整文本域大小：

只读与禁用

readonly 只读不可编辑，disabled 禁用且样式变灰：

这是只读内容，无法编辑。

在表单中使用

结合 Card 组件构建完整表单：

姓名 *

邮箱

反馈内容 *

0/500

改进建议

Props

参数	类型	默认值	说明
`modelValue`	`string`	`''`	输入值（v-model）
`variant`	`'outline' \| 'filled' \| 'borderless'`	`'outline'`	文本域变体样式
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	文本域尺寸
`placeholder`	`string`	`''`	占位文本
`label`	`string`	`''`	标签文本
`error`	`string`	`''`	错误提示文本
`status`	`'default' \| 'error' \| 'warning'`	`'default'`	状态类型
`statusText`	`string`	`''`	状态提示文本（优先于 error 显示）
`disabled`	`boolean`	`false`	是否禁用
`readonly`	`boolean`	`false`	是否只读
`clearable`	`boolean`	`false`	是否可清除
`maxlength`	`number`	`—`	最大输入长度
`showCount`	`boolean`	`false`	是否显示字数统计（需配合 maxlength）
`rows`	`number`	`4`	默认行数
`autoSize`	`boolean \| { minRows?: number; maxRows?: number }`	`false`	自适应高度，可设置最小最大行数
`resizable`	`boolean`	`false`	是否允许用户拖拽调整大小
`required`	`boolean`	`false`	是否显示必填标记

Events

事件名	类型	说明
`update:modelValue`	`(value: string) => void`	输入值变化时触发
`input`	`(value: string, event: Event) => void`	输入时触发
`focus`	`(event: FocusEvent) => void`	获得焦点时触发
`blur`	`(event: FocusEvent) => void`	失去焦点时触发
`clear`	`() => void`	点击清除按钮时触发
`keydown`	`(event: KeyboardEvent) => void`	按键按下时触发

Methods

方法名	类型	说明
`focus`	`() => void`	使文本域获得焦点
`blur`	`() => void`	使文本域失去焦点
`resize`	`() => void`	手动触发自适应高度计算