vue 回车查询 按钮_VUE登陆界面监听回车键响应登陆按钮

参考：vue 实现登录键盘enter事件 这篇的方法

我的html按钮：

登录

css样式：

/* 登陆按钮input方法，就用不到这个表单 */

.denglu{

background-image: url(../../../assets/images/img/00_log_in/login_button_login_normal.png);//重点

width: 3.38rem;

height: 0.53rem;

margin-top: 0.2rem;

background-repeat: no-repeat;//重点

border-radius: 10px; /*圆角 *///重点

}

方法一:

接下来就是按照他的方法：

created() {

// this.setLogin();

//按回车键响应

var _this = this;

document.onkeydown = function(e) {

let key = window.event.keyCode;

if (key == 13) {

_this.login();

}

};

},

methods: {

login(){

//这里就是具体实现的登陆方法具体实现方式，略！

//判断账号密码

}

}

var _this = this;不知道他这是什么意思，是this冲突？不管了。验证可以实现

方法二：好处是可以销毁，不影响其他界面

参考：https://www.imooc.com/article/301401?block_id=tuijian_wz

mounted(){

//绑定事件

window.addEventListener('keydown',this.keyDown);

},

methods: {

//绑定监听事件

keyDown(e){

//如果是按回车则执行登录方法

if(e.keyCode == 13){

this.login();

}

},

//销毁事件

dstroyed(){

window.removeEventListener('keydown',this.keyDown,false);

},

//具体登陆按钮事件

login(){

//这里就是具体实现的登陆方法具体实现方式，略！

//判断账号密码

//发送请求，后端验证

},

//接收请求

jieshou(data){

//比如：接收到后端回的信息是data数据

if(data ==202){//接收成功

this.dstroyed();//这里一定要调用才销毁，不然进入其他界面，回车键还有响应。

}

}

}

都可以实现，可能方式二增加销毁后，其他页面就不受影响。记得登陆成功后一定要this.dstroyed();