Vue가 페이지 키보드 이벤트를 구현하는 방법(코드 포함)

이 글의 내용은 Vue가 페이지 키보드 이벤트(코드 포함)를 구현하는 방법에 대한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

저희 회사 개발 프로젝트에서는 vue+elementUI를 사용하고 있는데, 로그인 페이지를 만들 때 엔터키를 눌렀을 때 로그인 버튼을 눌렀을 때와 동일한 기능을 구현해야 해서 바이두를 통해서 검색을 하게 되었습니다. @keyup.enter.native="submitForm('loginData')"가 버튼에 바로 추가되어 있어서 너무 기뻐서 저장 후 로그인 페이지에 가서 엔터키를 눌렀는데 안되네요. 일하다. 그런 다음 Baidu는 요소를 사용하여 키보드 이벤트를 버튼이나 el 입력에 직접 바인딩하면 먼저 포커스를 얻어야 하기 때문에 쓸모가 없다는 것을 발견했습니다. 문제 해결이 최우선이고 바이두가 그 뒤를 따른다. 올바른 바인딩 방법을 찾았습니다. vue의 생성된 후크에 다음 코드를 삽입하면 괜찮습니다

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

그런데, 로그인 코드도 게시했습니다:

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

이제 끝났습니다.

관련 권장 사항:

Vue에서 전역적으로 키보드 이벤트를 구성하는 방법

키보드 입력 이벤트는 하나의 page_html/css_WEB-ITnose

에 여러 번 바인딩됩니다.

위 내용은 Vue가 페이지 키보드 이벤트를 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!