# ui-form-textarea 文本域组
版本：v2.3.11
文本域组件用于输入多行文本，支持自定义行数、字数限制和自动高度
# 基本使用
<template>
<div class="form-textarea-demo">
<ui-form-textarea v-model="value" placeholder="请输入内 />
<p>输入内容：{{ value }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
</script>
<style scoped>
.form-textarea-demo {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
</style>
# Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | String | - | 文本域的 |
placeholder | String | - | 占位符文 |
disabled | Boolean | false | 是否禁用 |
readonly | Boolean | false | 是否只读 |
rows | Number | 3 | 行数 |
maxlength | Number | - | 最大输入长 |
showWordLimit | Boolean | false | 是否显示字数统计 |
autoSize | Boolean/Object | false | 是否自动调整高度 |
resize | String | 'vertical' | 是否允许调整大小，可选值：none、vertical、horizontal、both |
# Events
| 事件 | 说明 | 回调参数 |
|---|---|---|
change | 输入值变化时触发 | (value: String) 当前输入 |
input | 实时输入时触 | (value: String) 当前输入 |
focus | 获得焦点时触 | (event: Event) 焦点事件对象 |
blur | 失去焦点时触 | (event: Event) 失去焦点事件对象 |
lineChange | 行数变化时触 | (rows: Number) 当前行数 |
# 示例
# 带字数统计的文本
<template>
<div class="form-textarea-demo">
<ui-form-textarea
v-model="value"
placeholder="请输入内
:maxlength="100"
showWordLimit
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
</script>