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
字段名 | 类型 | 描述 |
---|---|---|
modelValue | String | 绑定的值 |
placeholder | String | 占位符文本 |
rows | Number | 行数,默认为2,必须大于等于1 |
maxlength | Number | 最大长度 |
minlength | Number | 最小长度 |
autoSize | Boolean | 是否自动调整大小,默认为false |
disabled | Boolean | 是否禁用,默认为false |
readonly | Boolean | 是否只读,默认为false |