Textarea 文本域


文本域输入框,用于输入多行文本,不适用于富文本输入

基础文本域

默认固定为两行的文本域,使用方法类似 AtInput 组件

Textarea文本域 - 图1

  1. <at-textarea v-model="inputValue" placeholder="这里是输入框..."></at-textarea>

禁用状态

添加属性 disabled 禁用文本域输入框

Textarea文本域 - 图2

  1. <at-textarea v-model="inputValue" placeholder="这里是输入框..." disabled></at-textarea>

自适应文本高度(限制行数)

可根据输入文本的行数,自动调整输入框的高度,可分别通过 minRowsmaxRows 属性来设置文本域的最小和最大行数

Textarea文本域 - 图3

  1. <p class="demo-desc">minRows=2, maxRows=4</p>
  2. <at-textarea v-model="inputValue2" min-rows="2" max-rows="4" placeholder="这里输入内容,请输入多行"></at-textarea>

自适应文本高度(不限制行数)

设置属性 autosize,可根据输入文本的行数,自动调整输入框的高度,不限制行数。如果同时使用 autosizeminRows,会优先使用 autosize

Textarea文本域 - 图4

  1. <at-textarea v-model="inputValue3" autosize placeholder="这里输入内容,请输入多行"></at-textarea>

Textarea 参数

参数说明类型可选值默认值
name原生属性String--
value文本域的值,可通过 v-model 绑定String--
autosize是否自动调整输入框高度Boolean-false
placeholder占位文本(原生属性)String--
disabled是否禁用(原生属性)Boolean-false
autofocus是否自动获取焦点(原生属性)Boolean-false
resize是否能被用户缩放Stringnone, both, horizontal, verticalvertical