elementui blur

ElementUI blur 事件处理

ElementUI 表单组件（如 el-input、el-select）支持 blur 事件，用于在输入框失去焦点时触发自定义逻辑。以下是常见用法和注意事项：

基本用法

在 el-input 上绑定 @blur 事件，触发相应方法：

<el-input v-model="inputValue" @blur="handleBlur"></el-input>

methods: {
  handleBlur(event) {
    console.log('输入框失去焦点', event.target.value);
  }
}

表单验证结合

blur 事件常用于触发表单验证（如校验输入格式）：

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item prop="username">
    <el-input v-model="form.username" @blur="validateField('username')"></el-input>
  </el-form-item>
</el-form>

methods: {
  validateField(field) {
    this.$refs.formRef.validateField(field);
  }
}

动态绑定 blur

通过 v-on 动态绑定事件：

<el-input @[eventName]="handler" v-model="value"></el-input>

data() {
  return {
    eventName: 'blur'
  };
}

注意事项

• 与 change 区别：blur 在失去焦点时触发，change 在值变化时触发（行为因组件而异）。
• 自定义组件：若封装自定义组件需暴露 blur 事件，需手动调用 this.$emit('blur')。
• 异步问题：若 blur 事件涉及异步操作（如接口校验），需注意回调时序。

示例：失焦校验手机号

<el-input v-model="phone" @blur="checkPhone"></el-input>

methods: {
  checkPhone() {
    const reg = /^1[3-9]\d{9}$/;
    if (!reg.test(this.phone)) {
      this.$message.error('手机号格式错误');
    }
  }
}