【区分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 实例的属性来操作它。

示例：

<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 中也没有提供方法。

示例：

<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 中