Textarea 文本域

Textarea 文本域

多行文本输入控件，对齐 Ant Design Input.TextArea 能力，支持自适应高度、字数统计、校验状态、形态变体与可清除。

何时使用

  • 需要用户输入大段文本，如描述、评论、备注等。
  • 需要限制行数、自适应高度增长或展示字数提示时。

迁移说明：原 @reglow/reui 已改为转发 reui/textarea，现有业务引用无需改动即可获得升级能力。

导入

import { Textarea } from "@reglow/reui";

代码演示

基础用法

<script setup>
import { ref } from "vue";
import { Textarea } from "@reglow/reui";

const value = ref("");
</script>

<template>
  <Textarea v-model="value" placeholder="请输入内容" class="max-w-md" />
</template>

指定行数

通过 rows 设置固定高度行数。

<template>
  <Textarea :rows="6" placeholder="6 行文本域" class="max-w-md" />
</template>

自适应高度 autoSize

autoSize 可设为 true，或 { minRows, maxRows } 限制最小/最大行数。达到 maxRows 后出现滚动条。

<script setup>
const min = ref(2);
const max = ref(6);
</script>

<template>
  <div class="flex max-w-md flex-col gap-4">
    <Textarea placeholder="随内容自动增高" auto-size />
    <Textarea
      placeholder="2~6 行自动缩放"
      :auto-size="{ minRows: min, maxRows: max }"
    />
  </div>
</template>

字数统计与最大长度

<template>
  <Textarea
    v-model="value"
    show-count
    :max-length="100"
    placeholder="最多 100 字"
    class="max-w-md"
  />
</template>

自定义计数格式：

<script setup>
const countFormatter = ({ count, maxLength }) => `${count}/${maxLength}`;
</script>

<template>
  <Textarea
    v-model="value"
    :show-count="{ formatter: countFormatter }"
    :max-length="200"
    class="max-w-md"
  />
</template>

校验状态

<template>
  <div class="flex max-w-md flex-col gap-3">
    <Textarea v-model="v1" status="error" placeholder="错误状态" />
    <Textarea v-model="v2" status="warning" placeholder="警告状态" />
  </div>
</template>

形态变体

与 Input / DatePicker 共用同一套主题。

<template>
  <div class="flex max-w-md flex-col gap-3">
    <Textarea v-model="v1" variant="filled" placeholder="填充样式" />
    <Textarea v-model="v2" variant="borderless" placeholder="无边框" />
    <Textarea v-model="v3" variant="underlined" placeholder="下划线" />
  </div>
</template>

可清除

<template>
  <Textarea v-model="value" allow-clear placeholder="输入后可一键清除" class="max-w-md" />
</template>

禁用 / 只读

<template>
  <div class="flex max-w-md flex-col gap-3">
    <Textarea v-model="v1" disabled placeholder="禁用" />
    <Textarea v-model="v2" readonly placeholder="只读" />
  </div>
</template>

API

Props

属性说明类型默认值
modelValue当前值（v-model）string | number—
defaultValue默认值（非受控）string | number—
placeholder占位文字string""
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
rows行数（原生 rows）number—
autoSize自适应高度boolean | { minRows?: number; maxRows?: number }false
maxLength最大长度number—
showCount展示字数boolean | { formatter?: (info: { value, count, maxLength? }) => string }false
allowClear可点击清除boolean | { clearIcon?: VNode }false
status校验状态"error" | "warning"—
variant形态变体"outlined" | "borderless" | "filled" | "underlined""outlined"
bordered是否有边框booleantrue
classNames语义化结构类名（root/textarea/count/clear）Partial<Record<...>>—
styles语义化结构行内样式（同上）Partial<Record<...>>—

同时透传原生 textarea 属性（name、id、cols、wrap 等）。

Events

事件说明回调参数
update:modelValuev-model 更新(value: string)
change内容变化（对齐 antd onChange）(value: string)
pressEnter按下回车（非 Shift）(e: KeyboardEvent)
clear点击清除按钮—
focus获得焦点(e: FocusEvent)
blur失去焦点(e: FocusEvent)

实例方法

方法说明
focus()聚焦文本域
blur()移除焦点
resize()手动重新计算 autoSize 高度

设计规范

  • 文本域内容区域沿用原生 textarea 换行行为；autoSize 通过动态计算内容高度实现，达到 maxRows 后出现内部滚动条。
  • 校验状态 status 与形态 variant 均与 Input / DatePicker 共用 lib/form-field 统一主题。
TagsInput 标签输入
用于输入多个标签/关键词的输入组件，支持回车或粘贴分隔，可逐个删除，常用于标签、关键词、收件人等场景。
TimePicker 时间选择器
点击输入框弹出时间面板进行选择，基于 dayjs。