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

我的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(){
		//绑定事件，其他界面可能要写在methods里
		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();

依葫芦画瓢，其他需要回车实现的，如搜索，都可以勇方法二，但是要不要销毁，我试了销毁带来的用户体验不佳，赶紧去试试吧！

例子：

现有监听@change="sousuoEnter()"，再有点击事件@click="sousuo()"

<el-input v-model="search1" :placeholder="$t('inputname')" @change="sousuoEnter()" clearable>输入框</el-input>
<el-button type="primary" icon="el-icon-search" @click="sousuo()">搜索按钮</el-button>

        //绑定监听事件
        keyDown(e){
          //如果是按回车则执行登录方法
          if(e.keyCode == 13){
            this.sousuo();
          }
        },
        //销毁事件
        destroyed(){
           window.removeEventListener('keydown',this.keyDown,false);
        },
        //@change事件，类似监听
        sousuoEnter(){
           //绑定事件
           window.addEventListener('keydown',this.keyDown);
        },
        //click事件，点击搜索事件
        sousuo() {
            // this.$message.info("Search");
          
          if(this.search1 =="" || this.search1 ==null){//为空就搜索全部

            //搜索方法实现，略！
          }

这个如果销毁事件，要按两次回车键才生效，这个有没有好的解决办法，自己思考。

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

猜你喜欢