elementui blur
elementui blur 事件的使用方法
在 Element UI 中，blur 事件通常用于表单组件（如 el-input、el-select 等），当组件失去焦点时触发。可以通过 @blur 或 v-on:blur 绑定事件处理函数。
在 el-input 中使用 blur
<template>
<el-input v-model="inputValue" @blur="handleBlur"></el-input>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleBlur(event) {
console.log('Input 失去焦点', event.target.value);
// 可以在这里进行表单校验或其他逻辑
}
}
}
</script>在 el-select 中使用 blur
<template>
<el-select v-model="selectedValue" @blur="handleSelectBlur">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: ''
}
},
methods: {
handleSelectBlur() {
console.log('Select 失去焦点', this.selectedValue);
}
}
}
</script>自定义校验逻辑
blur 事件常用于表单校验，例如在输入框失去焦点时检查输入是否合法：
<template>
<el-input v-model="email" @blur="validateEmail"></el-input>
<span v-if="errorMessage" style="color: red;">{{ errorMessage }}</span>
</template>
<script>
export default {
data() {
return {
email: '',
errorMessage: ''
}
},
methods: {
validateEmail() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(this.email)) {
this.errorMessage = '请输入有效的邮箱地址';
} else {
this.errorMessage = '';
}
}
}
}
</script>注意事项
blur事件与change事件不同，blur仅在失去焦点时触发，而change在值变化时触发。- 对于动态生成的表单元素，确保
blur事件绑定正确，避免事件未生效的问题。 - 在复杂表单中，可以结合 Element UI 的
Form组件进行统一校验。
通过合理使用 blur 事件，可以优化用户交互体验，例如实时校验输入或提交数据前的检查。
