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> 以获得更好的性能。