Element UI 的 el-input组件触发 blur事件

在 Vue 中使用 Element UI 的 el-input组件触发 blur事件时，需结合 Vue 的事件监听机制和 Element UI 的组件特性。以下是具体实现方式和注意事项：

---

一、直接绑定 @blur事件

el-input组件支持直接通过 @blur监听失焦事件，当输入框失去焦点时触发。

示例代码：

<template>
  <el-input
    v-model="inputValue"
    @blur="handleBlur"
    placeholder="请输入内容"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleBlur(event) {
      console.log('输入框失焦，当前值：', this.inputValue);
      // 可在此处添加校验、提交等逻辑
    }
  }
};
</script>

说明：

• @blur是 Vue 的事件监听指令，直接绑定到 el-input组件上。

• 事件回调参数 event包含原生 DOM 事件对象，可通过 event.target.value获取输入值。

---

二、通过 ref手动触发失焦

若需通过代码主动触发失焦（如回车键触发），需结合 ref获取组件实例并调用原生 blur()方法。

示例代码：

<template>
  <el-input
    ref="inputRef"
    v-model="inputValue"
    @keyup.enter.native="handleEnter"
    placeholder="按回车失焦"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleEnter() {
      // 通过 ref 获取组件实例，调用原生 blur()
      this.$refs.inputRef.$el.querySelector('input').blur();
    }
  }
};
</script>

说明：

• 使用 .native修饰符监听原生 keyup.enter事件（因 el-input是自定义组件）。

• 通过 this.$refs.inputRef.$el.querySelector('input')定位到内部的 <input>元素，调用 blur()方法触发失焦。

---

三、与表单校验结合

在 Element UI 的表单校验中，blur事件是触发校验的关键。

示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="名称" prop="name">
      <el-input
        v-model="form.name"
        @blur="handleBlur"
        placeholder="请输入名称"
      />
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: { name: '' },
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleBlur() {
      this.$refs.formRef.validateField('name'); // 手动触发校验
    }
  }
};
</script>

说明：

• 表单校验默认在 blur事件触发时执行（需在 rules中设置 trigger: 'blur'）。

• 可通过 this.$refs.formRef.validateField()手动触发校验。

---

四、注意事项

1. 事件冒泡问题​

   • 若 el-input内部嵌套其他组件（如 el-select），需确保事件绑定在正确的元素上。

   • 使用 .native修饰符时，仅对原生 DOM 事件有效。

2. 异步校验​

   • 若校验逻辑涉及异步操作（如 API 请求），需在 handleBlur方法中返回 Promise 或使用 async/await。

3. 性能优化​

   • 避免在 blur事件中执行复杂计算或频繁的 DOM 操作，可使用防抖（Debounce）减少触发频率。

---

五、扩展场景

1. 自定义失焦逻辑

通过 @blur传递自定义参数：

<el-input
  v-model="inputValue"
  @blur="(event) => handleBlur(event, 'customParam')"
/>

2. 防抖处理

使用 Lodash 的 _.debounce优化频繁触发：

import _ from 'lodash';
export default {
  methods: {
    handleBlur: _.debounce(function(event) {
      // 防抖后的逻辑
    }, 300)
  }
};

---

通过上述方法，可灵活控制 el-input的失焦行为，适用于表单提交、实时校验、搜索联想等场景。