La interfaz de inicio de sesión de VUE monitorea la tecla Enter para responder al botón de inicio de sesión

Referencia: vue implementa  el método de registro en el evento enter del teclado

 

 

Mi botón html:

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

estilo 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; /*圆角 *///重点
    		}

 

método uno:

El siguiente paso es seguir su método:

created() {
		//    this.setLogin();
		  //按回车键响应
			var _this = this;
			document.onkeydown = function(e) {
			let key = window.event.keyCode;
			if (key == 13) {
				_this.login();
			}
			};
	   },

methods: {
  login(){
        //这里就是具体实现的登陆方法具体实现方式，略！
        //判断账号密码
  }
}

var _this = esto; no sé lo que quiere decir, ¿es este conflicto? No me importa. Se puede lograr la verificación

 

Método 2: la ventaja es que se puede destruir sin afectar a otras interfaces

Referencia: 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();//这里一定要调用才销毁，不然进入其他界面，回车键还有响应。
     }
  }
  

}

Ambos se pueden lograr y otras páginas no se verán afectadas después de que se agregue la destrucción en el segundo método. Recuerde this.dstroyed () después de iniciar sesión correctamente;

De acuerdo con la pintura de calabaza, otras cosas que deben implementarse, como la búsqueda, se pueden hacer en el método dos, pero si quieres destruirlo, probé la experiencia del usuario causada por la destrucción, ¡así que apúrate y pruébalo!

ejemplo:

Monitor existente @ change = "sousuoEnter ()" y haga clic en event @ 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){//为空就搜索全部

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

Si el evento se destruye, entrará en vigor presionando la tecla Enter dos veces. Si hay una buena solución para esto, piense por usted mismo.