话不多说,直接上码:
<el-form
:model="personInfo"
class="search-from"
label-width="80px"
@submit.native.prevent>
<el-form-item label="卡号">
<el-input
v-model="personInfo.personId"
placeholder="请输入卡号"
class="form-item"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
@keyup.enter.native="loginEnter">查询</el-button>
<el-button
size="small"
@click="back">取消</el-button>
</el-form-item>
</el-form>
解析:
在上面el-form添加 @submit.native.prevent
.native 表示对一个组件绑定系统原生事件
.prevent 表示提交以后不刷新页面
el-button添加 @keyup.enter.native=“loginEnter” 即为回车事件调用loginEnter()登录方法
在钩子函数created()中添加回车事件
created () {
document.onkeydown = (e) => {
if (window.event === undefined) {
var key = e.keyCode
} else {
// eslint-disable-next-line no-redeclare
var key = window.event.keyCode
}
if (key === 13) {
this.loginEnter()
}
}
},
methods: {
loginEnter () {
// 详细处理方法
}
}
离开页面后,阻止回车事件
destroyed () {
document.onkeydown = undefined
}
以上,就完成了。
onkeypress与onkeydown 事件区别可以参考本人的另一篇博客:
onkeypress与onkeydown 事件区别详细说明
关于input框中按回车失去焦点方法可以参照:
input框中按回车失去焦点