Textarea 文本域

多行文本输入框，支持自动高度、字数统计和可清除。

基础用法

字数：0

基础文本域，clearable 可清除

vue

<template>
  <div style="max-width: 400px">
    <ATextarea v-model="val" placeholder="请输入内容..." :clearable="true" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">字数：{{ val.length }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ATextarea } from '@lite-code/aui-vue'

const val = ref('')
</script>

自动高度

设置 autoSize，文本域高度随内容自动增长。

autoSize 自动高度

vue

<template>
  <div style="max-width: 400px">
    <ATextarea v-model="val" placeholder="自动高度，随内容增长..." :auto-size="true" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ATextarea } from '@lite-code/aui-vue'

const val = ref('')
</script>

字数统计

设置 showCount 显示字数，配合 maxLength 展示限制。

0/100

showCount + maxLength 字数统计

vue

<template>
  <div style="max-width: 400px">
    <ATextarea
      v-model="val"
      placeholder="最多输入 100 字..."
      :show-count="true"
      :max-length="100"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ATextarea } from '@lite-code/aui-vue'

const val = ref('')
</script>

禁用状态

禁用状态下的文本内容

禁用状态

vue

<template>
  <div style="max-width: 400px">
    <ATextarea :model-value="'禁用状态下的文本内容'" disabled />
  </div>
</template>

<script setup lang="ts">
import { ATextarea } from '@lite-code/aui-vue'
</script>

尺寸

sm / md / lg 三种尺寸

vue

<template>
  <div style="max-width: 400px; display: flex; flex-direction: column; gap: 12px">
    <ATextarea placeholder="小尺寸 sm" size="sm" />
    <ATextarea placeholder="中尺寸 md（默认）" size="md" />
    <ATextarea placeholder="大尺寸 lg" size="lg" />
  </div>
</template>

<script setup lang="ts">
import { ATextarea } from '@lite-code/aui-vue'
</script>

API

Props

属性	类型	默认值	说明
modelValue	string	—	受控文本值
defaultValue	string	''	非受控初始值
size	'sm' | 'md' | 'lg'	'md'	尺寸
autoSize	boolean	false	自动高度随内容增长
showCount	boolean	false	显示字数统计
clearable	boolean	false	显示清除按钮
disabled	boolean	false	禁用
maxLength	number	—	最大字数限制
placeholder	string	—	占位文字
rows	number	—	初始行数

Events

事件名	回调参数	说明
update:modelValue	(value: string)	文本变更
change	(value: string)	文本变更

方法

方法名	说明
focus()	使文本域获取焦点