Textarea 多行文本框

多行文本输入，支持自适应高度、字数统计和最大长度限制

多行文本输入组件，支持自适应高度、字数统计和最大长度限制

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-textarea class="demo-default" />
  <re-textarea class="demo-placeholder" placeholder="请输入描述信息" />

<!-- 预设内容 -->
  <re-textarea class="demo-value" value="预设内容文本" />

<!-- 禁用状态 -->
  <re-textarea class="demo-disabled" :disabled="true" value="禁用内容" />

<!-- 字数统计 -->
  <re-textarea class="demo-indicator" :indicator="true" value="统计文本" />
  <re-textarea class="demo-indicator-empty" :indicator="true" placeholder="空内容统计" />

<!-- 自适应高度 -->
  <re-textarea class="demo-autosize" :autosize="true" placeholder="自适应高度" />

<!-- 指定行数 -->
  <re-textarea class="demo-rows" :rows="5" placeholder="5行高度" />

<!-- 标签 -->
  <re-textarea class="demo-label" label="描述" placeholder="请输入" />

<!-- 最大长度 -->
  <re-textarea class="demo-maxlength" :maxlength="50" :indicator="true" value="短文本" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-textarea />。

API

Textarea Props

名称类型默认值描述必传
valuestring | number""输入框的值N
placeholderstring"请输入"占位提示文字N
disabledbooleanfalse是否禁用N
readonlybooleanfalse是否只读N
maxlengthnumber-1最大输入长度，-1 表示不限制N
autosizebooleanfalse是否自适应高度。可传 boolean 或 { maxHeight: number } 对象（字符串形式传入）N
rowsnumber3指定默认行数（决定最小高度）N
labelstring""标签文字N
indicatorbooleanfalse是否显示字数统计N
customStylestring""自定义样式N

Textarea Events

名称参数描述
changevalue: string值变化时触发
inputvalue: string输入时触发
focus-聚焦时触发
blur-失焦时触发

Textarea Slots

名称描述
--
Switch 开关
参考 TDesign switch 示例，支持文字/图标内容、加载态、自定义颜色和不同尺寸动画。
TimePicker 时间选择器
底部弹层式时间滚轮选择器，对齐 TDesign 时间场景，支持时分、时分秒、范围限制与步长设置