How vue implements page keyboard events (with code)

The content of this article is about how vue implements page keyboard events (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Our company's development project uses vue elementUI. When making the login page, when clicking the enter key, it needs to achieve the same function as clicking the login button, so I searched on Baidu, so I went through Baidu. After that, I added @keyup.enter.native="submitForm('loginData')" directly on the click button. I was so happy that after saving it, I went to the login page and clicked the enter key, but it didn't work. Then Baidu discovered that if you use element to directly bind keyboard events to buttons or el-input, it is useless because you need to get focus first. Solving the problem is the first priority, followed by Baidu. Found the correct binding method: insert the following code into the created hook of vue and it will be ok

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

By the way, I will also post my login code:

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

This is it , you're done.

Related recommendations:

How vue configures keyboard events globally

## The keyboard enter event is bound multiple times to one page_html /css_WEB-ITnose

The above is the detailed content of How vue implements page keyboard events (with code). For more information, please follow other related articles on the PHP Chinese website!