Autosize 自适应文本域

根据文本内容自动调整高度的文本域组件。无需手动拖拽调整大小，输入时会自动扩缩至合适高度。

基础用法

通过 v-model 双向绑定文本内容，高度随输入自动变化。

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { TAutosize } from '@gulcc/tabler-vue'

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

<template>
  <TAutosize v-model="text" placeholder="请输入内容…" />
</template>

初始行数

rows 控制文本域的最小高度（即最少显示几行）。默认 3。

<TAutosize v-model="text" :rows="1" />
<TAutosize v-model="text" :rows="5" />

最大行数

max-rows 限制展开的最大行数。超出后显示垂直滚动条。

<TAutosize v-model="text" :max-rows="3" />

初始内容自适应

挂载时即根据已有内容自动调整高度。

<TAutosize v-model="text" />

禁用 / 只读

disabled 禁止交互，readonly 允许复制但不可编辑。两种状态下高度仍会自动调整。

<TAutosize v-model="text" disabled />
<TAutosize v-model="text" readonly />

API

Props

参数	类型	默认值	说明
v-model / modelValue	string	''	当前文本内容
placeholder	string	—	占位符文本
rows	number	3	最小行数，控制初始高度
max-rows	number	—	最大行数，超出后显示滚动条
disabled	boolean	false	禁用交互
readonly	boolean	false	只读模式
maxlength	number	—	最大字符数
name	string	—	原生 name 属性
id	string	—	原生 id 属性
required	boolean	false	必填验证

Emits

事件名	参数	说明
update:modelValue	(value: string)	v-model 更新事件
change	(value: string)	内容变化时触发