R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

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"booleanfalse
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 负责把当前输入进度展示出来。

页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS