Wie Vue Seitentastaturereignisse implementiert (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Seitentastaturereignissen (mit Code). Freunde in Not können sich darauf beziehen.

Das Entwicklungsprojekt unseres Unternehmens verwendet vue+elementUI. Beim Erstellen der Anmeldeseite muss beim Klicken auf die Eingabetaste die gleiche Funktion erreicht werden wie beim Klicken auf die Anmeldeschaltfläche, daher habe ich es auf Baidu durchsucht Ich habe es über Baidu erhalten und @keyup.enter.native="submitForm('loginData')" direkt auf der Klickschaltfläche hinzugefügt. Ich war so glücklich, es zu speichern und zur Anmeldeseite zu gehen, um darauf zu klicken die Eingabetaste, aber es hat nicht funktioniert. Dann entdeckte Baidu, dass es nutzlos ist, wenn Sie Elemente verwenden, um Tastaturereignisse direkt an Schaltflächen oder El-Eingaben zu binden, da Sie sich zuerst konzentrieren müssen. Die Lösung des Problems steht an erster Stelle, gefolgt von Baidu. Ich habe die richtige Bindungsmethode gefunden: Fügen Sie den folgenden Code in den erstellten Hook von Vue ein und es ist in Ordnung

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

Übrigens habe ich auch meinen Login-Code gepostet:

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("验证没通过！")
                    }
                });
            },
            
        },

Das war's, Sie sind fertig.

Verwandte Empfehlungen:

So konfigurieren Sie Tastaturereignisse global in Vue

Das Tastatureingabeereignis ist mehrfach an gebunden eine page_html /css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonWie Vue Seitentastaturereignisse implementiert (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!