Textarea 多行文本输入框

多行文本输入框组件，用于接收多行文本输入。

何时使用：需要接收用户多行文本输入（如评论、描述、备注）时使用。

注意：Textarea 组件只负责输入框本身，错误消息需要由使用者自行渲染，以获得最大的布局灵活性。

基础用法

v-model 绑定

自定义行数

设置 rows 属性控制默认显示行数。

自动高度

如需内容自适应高度，推荐使用 CSS field-sizing 属性（Chrome 123+ 支持）：

兼容性提示：field-sizing 是较新的 CSS 属性，Chrome 123+、Edge 123+ 支持。如需兼容旧浏览器，请自行实现 JS 方案。

尺寸

错误状态

error 属性仅控制输入框的边框和聚焦环样式，不渲染错误消息。

错误消息（用户自行控制）

禁用与只读

控制拖拽行为

默认情况下，用户可以垂直拖拽调整大小。可通过 CSS 覆盖：

<!-- 禁用拖拽 -->
<Textarea class="resize-none" />

<!-- 允许水平拖拽 -->
<Textarea class="resize-horizontal" />

<!-- 允许双向拖拽 -->
<Textarea class="resize-both" />

.resize-none {
  resize: none;
}
.resize-horizontal {
  resize: horizontal;
}
.resize-both {
  resize: both;
}

API

Props

属性	类型	默认值	说明
modelValue	string	''	输入框的值（v-model）
placeholder	string	''	占位文本
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
size	'sm' | 'md' | 'lg'	'md'	尺寸
rows	number	3	显示行数
error	boolean	false	错误状态（仅控制样式）

Events

事件	参数	说明
update:modelValue	(value: string)	输入时触发（v-model）
input	(event: Event)	原生 input 事件
change	(event: Event)	原生 change 事件
focus	(event: FocusEvent)	获得焦点时触发
blur	(event: FocusEvent)	失去焦点时触发

注意事项

• 文本域默认宽度 100%，填满父容器
• 默认支持垂直方向调整大小（resize: vertical）
• error 属性仅控制样式，不渲染错误消息
• 错误消息需要用户自行渲染，以获得最大的布局灵活性
• 聚焦时显示主题色边框和聚焦环，错误状态下聚焦环变为错误色
• 原生属性（id、name 等）通过 v-bind="$attrs" 自动透传
• 如需自动高度功能，推荐使用 CSS field-sizing: content