Textarea 多行文本
多行文本输入框,作为独立顶层组件存在(不挂在 Input 命名空间下)。
何时使用
- 需要多行长文本输入时。
- 需要根据内容自动调整高度(
autoSize)。 - 需要显示字符计数 / 限制最大长度(
showCount/maxLength)。
基本使用
自动调整高度
autoSize 支持 boolean | { minRows, maxRows } 三种形态:
false(默认):固定rows。true:高度跟随内容,无上限。- 对象:限制最小 / 最大行数。
字符计数
showCount 支持 boolean | { formatter },与 maxLength 配合显示 N / max。
清除按钮
allowClear 支持 boolean | { clearIcon },clearIcon 接 Iconify name 或 VNode。
校验状态
Variants
录入组件统一 variant 形态。四档:outlined(默认)/ filled / borderless / underlined。
Textarea 参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| modelValue | string | -- | 绑定值(v-model) |
| defaultValue | string | -- | 非受控初值,仅首次挂载使用 |
| placeholder | string | -- | 占位符 |
| rows | number | 2 | 原生 rows,autoSize 开启时忽略 |
| autoSize | boolean | false | |
| allowClear | boolean | { clearIcon?: VNode | string } |
| showCount | boolean | false | |
| maxLength | number | -- | 最大长度(透传原生 maxlength) |
| size | 'large' | 'default' | 'small' |
| disabled | boolean | false | 是否禁用 |
| readonly | boolean | false | 是否只读 |
| status | '' | 'error' | 'warning' |
| resize | 'none' | 'both' | 'horizontal' |
Textarea 事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| update:modelValue | value | 绑定值改变时触发(v-model) |
| input | value | 输入时触发 |
| change | value | 失焦时触发 |
| focus | event | 获得焦点 |
| blur | event | 失去焦点 |
| clear | -- | 点击清除按钮时触发 |
| press-enter | event | Enter(不含 Shift/Ctrl/Alt/Meta) |
| resize | autoSize 引起的高度变化 |
Textarea 插槽
| 插槽名 | 说明 |
|---|---|
| suffix | 文本框下方的附加内容 |