el-input组

### Vue 中 `el-input` 组件的使用方法及属性 #### 基本介绍 `el-input` 是 Element Plus 或 Element UI 提供的一个基础输入框组件，支持多种类型的输入操作。它不仅能够实现普通的文本输入功能，还提供了丰富的扩展选项，比如密码显示/隐藏、清除按钮等功能。 --- #### 属性列表 以下是常用的 `el-input` 属性及其说明： | 属性名 | 类型 | 默认值 | 描述 | |----------------|-----------------|------------|------------------------------------------------------------------------------------------| | `type` | String | text | 输入框类型，可以是 `text`, `password`, `textarea` 等[^1] | | `value/v-model`| String, Number | —— | 双向绑定的数据值 | | `placeholder` | String | —— | 占位符 | | `disabled` | Boolean | false | 是否禁用 | | `clearable` | Boolean | false | 是否显示清空按钮 | | `maxlength` | Number | —— | 最大字符长度 | | `minlength` | Number | —— | 最小字符长度 | | `show-word-limit` | Boolean | false | 文本区域是否显示字数统计 | | `rows` | Number | 2 | 当类型为 textarea 时，指定行数 | --- #### 自定义清空按钮 (仿 clearable 功能) 如果需要自定义清空按钮的行为，可以通过监听事件并结合插槽来实现。以下是一个基于 `<el-input>` 的示例代码片段，展示如何模拟 `clearable` 功能： ```vue <template> <div class="custom-clearable"> <el-input v-model="inputValue" placeholder="请输入内容" @focus="handleFocus" @blur="handleBlur" > <!-- 自定义后缀图标 --> <template #suffix> <i v-if="isClearVisible && inputValue !== ''" class="el-icon-circle-close custom-clear-btn" @click.stop="clearInput" ></i> </template> </el-input> </div> </template> <script> export default { data() { return { inputValue: '', isFocused: false, }; }, computed: { isClearVisible() { return this.isFocused; }, }, methods: { handleFocus() { this.isFocused = true; }, handleBlur() { this.isFocused = false; }, clearInput() { this.inputValue = ''; }, }, }; </script> <style scoped> .custom-clear-btn:hover { cursor: pointer; } </style> ``` 上述代码实现了当输入框获得焦点且有内容时，显示一个关闭图标；点击该图标即可清空输入框的内容。 --- #### 失焦问题解决方案 在某些场景下，可能会遇到 `el-input` 和其他组件（如 `el-select`）之间的失焦问题。这通常是因为多个组件竞争焦点所导致的。解决此问题的方法之一是在父级容器上添加 `@blur` 事件处理逻辑或者调整 DOM 结构以减少冲突[^2]。 --- #### 表单验证与 `el-form-item` 配合使用 为了更好地管理表单中的输入字段，建议将 `el-input` 放置在一个 `el-form-item` 容器内，并为其配置相应的校验规则。例如： ```vue <template> <el-form :model="formData" :rules="formRules" ref="formRef"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: { username: '' }, formRules: { username: [ { required: true, message: '请输入用户名', trigger: ['blur'] }, { min: 3, max: 10, message: '长度应在 3 到 10 字符之间', trigger: ['blur'] } ] } }; }, }; </script> ``` 在此例子中，`prop` 属性指定了当前项对应的校验规则键名，而这些规则则被定义在 `formRules` 对象中[^3]。 ---