【区分vue2和vue3下的element UI Input 输入框组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 中，Element UI 提供了 el-input 组件用于输入框功能。而在 Vue 3 中，Element UI 没有直接支持 Vue 3，但有一个名为 Element Plus 的项目提供了与 Element UI 类似但支持 Vue 3 的组件集。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中 el-input 组件的属性、事件和方法，并给出示例。

Vue 2 的 Element UI

`el-input`

属性：

value / v-model：绑定值，输入框的内容
type：输入框的类型，如 text、password 等
placeholder：占位符
disabled：是否禁用输入框
maxlength：最大输入长度
minlength：最小输入长度（Vue 2.6.0+）
show-word-limit：是否显示输入字数统计，与 maxlength 结合使用
clearable：是否可清空
readonly：是否只读
autofocus：是否自动获取焦点
autocomplete：原生的 autocomplete 属性
name：原生 name 属性
size：输入框尺寸，如 medium、small、mini
prefix-icon：输入框前置图标
suffix-icon：输入框后置图标
prefix：输入框前置内容
suffix：输入框后置内容
rows：输入框行数（仅在 type="textarea" 时有效）
autosize：自适应内容高度，仅对 type="textarea" 有效，可以是一个对象，如 { minRows: 2, maxRows: 6 }
resize：控制是否能被用户缩放（仅在 type="textarea" 时有效），可以设置为 none、both、horizontal、vertical
number：是否作为数字类型处理，仅在 type="number" 时有效
...（其他原生 input 属性）

事件：

input：在输入时触发
change：在内容改变且失去焦点时触发
clear：在点击清除按钮后触发
blur：在失去焦点时触发
focus：在获取焦点时触发
...（其他原生 input 事件）

方法：

el-input 本身没有提供方法，但你可以通过事件监听和 Vue 实例的属性来操作它。

示例：

vue 复制代码

<template>
  <el-input
    v-model="inputValue"
    placeholder="请输入内容"
    clearable
    @input="handleInput"
    @clear="handleClear">
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      console.log('输入的内容:', value);
    },
    handleClear() {
      console.log('输入框内容已清空');
    }
  }
};
</script>

Vue 3 的 Element Plus

在 Element Plus 中，el-input 组件的使用与 Vue 2 中的 Element UI 类似，但可能会有一些新的属性或调整。你应该查阅 Element Plus 的官方文档以获取最新的信息。

`el-input`

属性和事件与 Vue 2 中的 Element UI 类似，但可能会有一些新增或移除的属性。

方法：

与 Vue 2 相同，el-input 本身在 Element Plus 中也没有提供方法。

示例：

vue 复制代码

<template>
  <el-input
    v-model="inputValue"
    placeholder="请输入内容"
    clearable
    @input="handleInput"
    @clear="handleClear">
  </el-input>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputValue = ref('');

    const handleInput = (value) => {
      console.log('输入的内容:', value);
    };

    const handleClear = () => {
      console.log('输入框内容已清空');
    };

    return {
      inputValue,
      handleInput,
      handleClear
    };
  }
};
</script>

请注意，在 Vue 3 的 Composition API 中