Textarea 文本域
Textarea 不再只是原生textarea的样式壳。当前组件使用 Rue 的视觉基底, 同时提供了更适合真实输入场景的语义 API,比如status、allowClear、showCount、autoSize和resize。
何时使用
- 需要输入评论、备注、描述等多行文本,并希望使用 Rue 的基础视觉风格。
- 需要把状态提示、字数统计、清空操作和自动高度作为统一组件能力复用。
- 需要在轻量样式包装之外,再获得更顺手的交互语义和示例 参考。
# 基础用法
展示基础受控输入示例,并把当前输入内容直接展示出来。
当前内容:Rue Design Multiline input
# 语义状态与风格
用 status 处理输入风险提示,用 variant 调整层级,不必只靠自定义 className。
# 字数统计与清空
showCount 负责反馈输入进度,allowClear 用于快速回到空态。
Count
Clear + formatter
# 自动高度与缩放
autoSize 更适合评论、描述、发布说明;resize 则覆盖拖拽策略。
Auto size
Resize directions
# 颜色色板
使用颜色示例,使用 Rue 的主题色体系。
# 尺寸体系
展示基础 xs 到 xl 示例,并补充 small / middle / large 别名。
# 禁用与只读
展示基础 disabled 示例,并补一组只读场景。
# 场景组合
把 Filled、自动高度、清空和字数统计组合起来,就能快速搭出真实输入区。
发布备注
组合 `filled + allowClear + autoSize + showCount`。
使用建议
- 反馈输入优先开 `autoSize`,避免内容被遮住。
- 短文本编辑可配 `allowClear`,减少回删成本。
- 有字数约束时,直接叠加 `showCount + maxLength`。
API
下面列出当前页面重点推荐使用的 Textarea API。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
allowClear | 显示清空按钮,支持对象写法自定义图标 | boolean | { clearIcon?: any } | false |
autoSize | 自动根据内容撑高,可限制最小和最大行数 | boolean | { minRows?: number; maxRows?: number } | false |
color | 主题色;default 表示不追加色彩类 | 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'default' |
countClassName | 字数统计区域自定义类名 | string | - |
ghost | 支持基础用法,等价于 variant="ghost" | boolean | false |
onClear | 点击清空按钮后触发 | (event: MouseEvent) => void | - |
resize | 控制拖拽缩放方向 | 'none' | 'vertical' | 'horizontal' | 'both' | - |
rootClassName | 外层包装节点类名 | string | - |
showCount | 显示字数统计,支持 formatter 自定义展示 | boolean | { formatter?: (info: { count: number; maxLength?: number }) => any } | false |
size | 尺寸,支持 xs 到 xl,以及 small / middle / large 别名 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'middle' | 'medium' | 'large' | - |
status | 语义状态,未传 color 时会映射到 warning / error 视觉 | 'warning' | 'error' | - |
variant | 视觉变体,保持 Rue 当前 textarea 基底 | 'outlined' | 'filled' | 'ghost' | 'outlined' |
组合建议
showCount + maxLength:适合摘要、简介、备注等有限长输入。allowClear + autoSize:适合评论、回复、发布说明。status="warning":适合接近限制但仍可提交的状态。status="error":适合校验失败或缺少关键信息。FAQ
什么时候用 color,什么时候用 status?
color更偏主题色表达,适合整体视觉语气;status 更偏输入反馈语义, 适合警告和错误提示。常见表单场景里,优先用status 表达风险更直观。
autoSize 和原生 rows 是什么关系?
如果同时传了rows,它会作为自动高度的初始下限;如果只传autoSize 对象, 则优先使用其中的minRows。
showCount 会不会限制输入?
不会。真正的限制仍由原生maxLength控制;showCount 负责把当前输入进度展示出来。