vue登录页面实现回车登录

话不多说，直接上码：

<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框中按回车失去焦点