elementui textarea
ElementUI Textarea 组件使用指南
ElementUI 的 Textarea 组件是 ElInput 组件的一个扩展，通过设置 type="textarea" 属性可以将其渲染为多行文本输入框。以下是详细的使用方法和注意事项。
基本用法
<el-input
type="textarea"
:rows="3"
placeholder="请输入内容"
v-model="textareaValue">
</el-input>type="textarea"：指定输入框类型为多行文本。rows：设置默认显示的行数，影响初始高度。v-model：双向绑定输入值到变量textareaValue。
禁用状态
通过 disabled 属性可以禁用文本域：
<el-input
type="textarea"
disabled
placeholder="禁用状态"
v-model="disabledText">
</el-input>自适应高度
设置 autosize 属性可以让文本域根据内容自动调整高度：
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 6 }"
placeholder="自适应高度"
v-model="autosizeText">
</el-input>minRows：最小行数。maxRows：最大行数，超过时出现滚动条。
输入长度限制
结合 maxlength 和 show-word-limit 属性可以显示字数统计：
<el-input
type="textarea"
maxlength="100"
show-word-limit
placeholder="最多输入100个字符"
v-model="limitedText">
</el-input>自定义验证
可以通过 rules 属性实现表单验证：
<el-form :model="form" :rules="rules">
<el-form-item label="备注" prop="remark">
<el-input
type="textarea"
v-model="form.remark"
placeholder="请输入备注">
</el-input>
</el-form-item>
</el-form>rules: {
remark: [
{ required: true, message: '备注不能为空', trigger: 'blur' },
{ max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
]
}事件监听
支持常见的事件如 focus、blur、change 等：
<el-input
type="textarea"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange"
v-model="eventText">
</el-input>样式自定义
可以通过 class 或内联样式调整外观：
<el-input
type="textarea"
class="custom-textarea"
style="font-size: 14px;"
v-model="styledText">
</el-input>.custom-textarea {
border-radius: 4px;
border-color: #409EFF;
}注意事项
- 在表单中使用时，建议结合
el-form-item和el-form组件以实现完整的验证功能。 - 动态修改
v-model绑定的值时，组件会自动更新显示内容。 - 对于大量文本输入（如超过 100KB），建议使用原生
<textarea>以获得更好的性能。
