Input 为受控组件，它总会显示 Vue 绑定值。在正常情况下，input 的输入事件应该被正常响应。它的处理程序应该更新组件的绑定值 (或使用 v-model)。否则，输入框的值将不会改变。不支持 v-model 修饰符。
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
const inputValue = ref('');
一般这样写，简洁。
1. 大小：想要改变输入框和其中文字大小，可以
：deep（.el-input__wrapper）
2. 属性
①Placeholder：输入框占位符文本，当输入框为空时显示。占位符文本可以帮助用户了解输入框的用途。
设置了该属性后，再设置默认值就有可能默认值将文本覆盖掉。
②type ：常见的有 text、textarea、password 等
③clearable：是否显示清空按钮。点击该按钮会清空输入框的内容，方便用户快速清除输入。就是在输入框内加了个操纵删除的小图标。
④show-password：是否显示切换密码图标。适用于 type="password" 的输入框，点击图标可以切换密码的可见性。
⑤disabled：是否禁用输入框。禁用状态下，输入框不可编辑，背景颜色会变淡，鼠标指针变为禁用样式
⑥readonly：是否只读。只读状态下，输入框内容不可编辑，但可以复制。通常用于展示信息而不允许修改。
<el-input v-model="inputValue" placeholder="请输入内容" readonly></el-input>
const inputValue = ref('只读内容');
⑦maxlength/minlength：最大输入长度。超过此长度的输入将被截断。常用于限制用户输入的长度，避免过长的数据影响系统性能
<el-input v-model="inputValue" placeholder="请输入" maxlength="10"></el-input>
const inputValue = ref('');
⑧show-word-limit：是否显示输入字数统计。适用于设置了 maxlength 的输入框，可以在输入框下方显示当前输入的字数和最大字数。
⑨prefix-icon：输入框头部图标。可以是字符串或组件。图标可以提供视觉提示，帮助用户理解输入框的用途。
⑩suffix-icon：输入框尾部图标。可以是字符串或组件。图标可以提供操作提示，例如清空按钮或密码切换按钮。
rows ：当 type 为 textarea 时，设置行数。用于控制多行文本输入框的高度。
<el-input v-model="textarea" type="textarea" :rows="4" placeholder=""></el-input>
autosize ：当 type 为 textarea 时，自动调整高度。可以是一个布尔值或对象，对象中可以指定最小行数和最大行数。
<el-input v-model="textarea" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"></el-input>
resize ：当 type 为 textarea 时，是否允许拖动改变大小。可选值为 both、horizontal、vertical，分别表示允许水平、垂直或两个方向上拖动改变大小。
<el-input v-model="textarea" type="textarea" :rows="4" placeholder="请输入内容" resize="none"></el-input>
Name：输入框名称。用于表单提交时标识输入框。在表单中，可以通过 name 属性获取特定输入框的值
Autocomplete：原生 autocomplete 属性。用于浏览器自动填充功能。常见的值有 on 和 off，分别表示启用和禁用自动填充。
Form：原生 form 属性。用于关联表单。在多表单页面中，可以通过 form 属性将输入框与特定的表单关联起来。
Suffix：输入框尾部内容，只对非 type="textarea" 有效。可以是任何 VNode。常用于添加额外的文本或图标，例如单位或操作按钮。除此之外，还有prefix，prepend，append与其属性相似。
例：<el-input v-model="inputValue" placeholder="请输入内容">
<template #suffix>
<span>单位</span>
</template>
</el-input>
3. 事件
①update:modelValue：当绑定值变化时触发。这个事件主要用于实现双向数据绑定。
<el-input v-model="inputValue" placeholder="请输入内容" @update:modelValue="handleUpdate"></el-input>
const inputValue = ref('');
const handleUpdate = (value) => {
console.log('新的值:', value);
};
②input： 同 update:modelValue，当输入框内容发生变化时触发。这个事件主要用于监听输入框的变化。
③change：当输入框失去焦点或按下回车时触发。这个事件通常用于表单提交前的验证。
④focus：当输入框获得焦点时触发。这个事件可以用于记录用户的操作行为或显示提示信息。
<el-input v-model="inputValue" placeholder="请输入内容" @focus="handleFocus"></el-input>
const inputValue = ref('');
const handleFocus = (event) => {
console.log('输入框获得焦点', event);
};
⑤blur：当输入框失去焦点时触发。这个事件可以用于记录用户的操作行为或进行表单验证。
⑥clear：当用户点击清除按钮时触发。这个事件可以用于执行清除后的逻辑操作。
⑦keyup：当键盘按键抬起时触发。这个事件可以用于监听特定的键盘操作。
⑧keydown：当键盘按键按下时触发。这个事件可以用于监听特定的键盘操作。
⑨keypress：当键盘按键被按住时触发。这个事件可以用于监听特定的键盘操作。
以上，1，2，3，需要value: 新的值作为参数，4，5，7，8，9需要 event。常用的事件：input和change
