el-input 按回车失去焦点
@keyup.enter.native="$event.target.blur()"
<el-input v-model="total" @keyup.enter.native="$event.target.blur()" placeholder="按回车失去焦点" />✅ 原理说明
1. @keyup.enter 是什么？
这是 Vue 的按键修饰符语法，表示监听键盘抬起事件，并且只在按的是 Enter 键 时触发。
2. .native 是干什么的？
<el-input>是一个组件（不是原生 DOM 元素）；- 默认情况下，
@keyup.enter不会冒泡到父组件； - 加上
.native后，表示监听的是该组件根元素上的原生 DOM 事件；
即：
@keyup.enter.native等价于监听<input>原生元素上的keyup.enter事件。
3. $event.target.blur() 是什么？
$event.target拿到当前触发事件的 DOM 元素（即<input>）；.blur()方法会让这个元素失去焦点；- 效果就是：用户按回车 → 输入框失焦 → 触发
@blur事件；
✅ 这种写法是否推荐？
| 方式 | 是否推荐 | 说明 |
|---|---|---|
@keyup.enter.native="$event.target.blur()" | ✅ 推荐（简单场景） | 快速实现回车失焦，无需额外方法 |
使用自定义方法如 @keyup.enter="handleEnter" | ✅ 推荐（复杂交互） | 更灵活，可扩展提交、校验等逻辑 |
在 el-input 中实现按回车键失去焦点，可以通过监听回车事件并手动触发 blur 方法。以下是两种实现方式：
方法 1：使用 @keyup.enter.native 和事件对象
-
监听回车事件：使用
@keyup.enter.native监听原生回车事件（.native确保监听原生事件）。 -
调用
blur方法：在事件处理函数中，通过event.target获取输入框元素并调用blur()。
html
复制
下载
运行
<el-input @keyup.enter.native="handleEnter" />
javascript
复制
下载
methods: {handleEnter(event) {event.target.blur(); // 直接让输入框失去焦点}
}
方法 2：通过 ref 获取输入框元素
-
绑定
ref：给el-input绑定一个引用名（如inputRef）。 -
监听回车事件：同样使用
@keyup.enter.native。 -
通过
ref触发失焦：通过this.$refs.inputRef获取组件实例，再定位到内部的input元素。
html
复制
下载
运行
<el-input ref="inputRef" @keyup.enter.native="handleEnter" />
javascript
复制
下载
methods: {handleEnter() {// 通过 ref 获取输入框元素并失焦this.$refs.inputRef.$el.querySelector('input').blur();}
}
注意事项
-
.native修饰符：由于el-input是自定义组件，直接监听@keyup.enter可能无效，需添加.native监听原生事件。 -
兼容性：如果 Element UI 版本更新导致组件内部结构变化（例如
input元素的路径不同），方法 2 可能需要调整选择器。此时方法 1 更稳定。 -
失去焦点的作用：失焦后，输入框会触发
blur事件，可结合其他逻辑（如表单校验）。
总结
推荐 方法 1（直接通过 event.target.blur()），代码更简洁且依赖较少。若遇到 event.target 指向问题（如嵌套其他元素），再改用方法 2。