Skip to content

Textarea 文本域

多行文本输入框,用于输入较长的文本内容。

基础用法

通过设置 v-model 绑定输入框的值

vue
<template>
  <ImTextarea v-model="textarea"></ImTextarea>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textarea = ref('Hello World!');
</script>

禁用文本域

通过设置 disabled 属性来禁用文本域

vue
<template>
  <ImTextarea v-model="textarea" disabled></ImTextarea>
</template>

只读文本域

通过设置 readonly 属性来只读文本域

vue
<template>
  <ImTextarea v-model="textarea" readonly></ImTextarea>
</template>

设置 rows

通过设置 rows 属性来控制文本域的行数。如果不设置,则默认为 2 行。

vue
<template>
  <ImTextarea :rows="5"></ImTextarea>
</template>

自适应高度

通过设置 autoSize 属性为 true,可以使得文本域的高度自动适应内容。

vue
<template>
  <ImTextarea v-model="textarea2" autoSize></ImTextarea>
</template>

限制输入长度

设置 最大长度 maxlength 属性,可以限制文本域的输入长度。

vue
<template>
  <ImTextarea maxlength="10" placeholder="最多十个字"></ImTextarea>
</template>

API

字段名类型描述
modelValueString绑定的值
placeholderString占位符文本
rowsNumber行数,默认为2,必须大于等于1
maxlengthNumber最大长度
minlengthNumber最小长度
autoSizeBoolean是否自动调整大小,默认为false
disabledBoolean是否禁用,默认为false
readonlyBoolean是否只读,默认为false

基于 MIT 协议发布