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