Skip to content

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 参数

参数类型默认说明
modelValuestring--绑定值(v-model)
defaultValuestring--非受控初值,仅首次挂载使用
placeholderstring--占位符
rowsnumber2原生 rows,autoSize 开启时忽略
autoSizebooleanfalse
allowClearboolean{ clearIcon?: VNodestring }
showCountbooleanfalse
maxLengthnumber--最大长度(透传原生 maxlength)
size'large''default''small'
disabledbooleanfalse是否禁用
readonlybooleanfalse是否只读
status'''error''warning'
resize'none''both''horizontal'

Textarea 事件

事件名参数说明
update:modelValuevalue绑定值改变时触发(v-model)
inputvalue输入时触发
changevalue失焦时触发
focusevent获得焦点
blurevent失去焦点
clear--点击清除按钮时触发
press-entereventEnter(不含 Shift/Ctrl/Alt/Meta)
resizeautoSize 引起的高度变化

Textarea 插槽

插槽名说明
suffix文本框下方的附加内容

Released under the MIT License.