参考: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();