VUE登陆界面监听回车键响应登陆按钮

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

 

 

我的html按钮：

<el-button type="primary" v-on:keyup.13.native="submit" id="denglu" class="denglu"  @click="login('ruleForm2')">登录</el-button>

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();

来源：oschina

链接：https://my.oschina.net/u/4415966/blog/4841930