Comment vue implémente les événements de clavier de page (avec code)

Le contenu de cet article explique comment vue implémente les événements du clavier de page (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le projet de développement de notre entreprise utilise vue+elementUI Lors de la création de la page de connexion, lorsque vous cliquez sur la touche Entrée, il doit remplir la même fonction que de cliquer sur le bouton de connexion, je l'ai donc recherché sur Baidu et. Je l'ai réussi Après Baidu, ils ont ajouté @keyup.enter.native="submitForm('loginData')" directement sur le bouton de clic. J'étais si heureux de l'enregistrer et d'accéder à la page de connexion pour cliquer. la touche Entrée mais cela n'a pas fonctionné. Ensuite, Baidu a découvert que si vous utilisez un élément pour lier directement les événements du clavier aux boutons ou à l'entrée électronique, cela ne sert à rien car vous devez d'abord vous concentrer. La résolution du problème est la première priorité, suivie par Baidu. J'ai trouvé la bonne méthode de liaison : insérez le code suivant dans le hook de vue créé et tout ira bien

created(){
            var _self = this;
            document.onkeydown = function(e){
                var key = window.event.keyCode;
                if(key == 13){
                    _self.submitForm('loginData');
                }
            }
        }

Au fait, je poste également mon code de connexion :

methods: {
            submitForm(formName) {
                var _self = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       getInfo.post('api-token-auth/',{username:_self.loginData.userCount,password:_self.loginData.password}).then(function(data){
                            if(data.data.code == 0){
                                let jwtSession = 'JWT'+' '+data.data.token;
                                localStorage.setItem("checkSession", jwtSession);
                                localStorage.setItem("userInfo", data.data.userinfo.username);
                                localStorage.setItem("routes",JSON.stringify(data.data.userinfo.permissions))
                                // 路由权限过滤
                                var menuData = JSON.parse(localStorage.getItem('routes'));
                                var localRouter = _self.$router.options.routes
                                for(let i = 0;i<menuData.length;i++){
                                  for(let q = 0;q<localRouter.length;q++){
                                    if(menuData[i].codename == localRouter[q].path.replace(/\//,"")){
                                      localRouter[q].hidden = false;
                                    } 
                                  }
                                }
                                _self.$router.addRoutes(localRouter)
                                _self.$router.push({ path: &#39;/ops_menu_sever_manage&#39;});
                            }
                            else{
                                _self.$message({
                                    message: data.data.msg,
                                    type: &#39;warning&#39;
                                });
                                // _self.$router.push({ path: &#39;/login&#39;});
                            }
                            
                       });
                    } else {
                        console.log("验证没通过！")
                    }
                });
            },
            
        },

Ça y est, vous avez terminé.

Recommandations associées :

Comment configurer les événements de clavier globalement dans vue

L'événement d'entrée de clavier est lié plusieurs fois à une page_html /css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!