vue がページ キーボード イベントを実装する方法 (コード付き)

この記事の内容は、Vue がページ キーボード イベントを実装する方法に関するものです (コード付き)。必要な方は参考にしていただければ幸いです。

弊社の開発プロジェクトではvue+elementUIを使用しており、ログインページを作成する際、Enterキーをクリックした際にログインボタンをクリックしたのと同じ機能を実現する必要があるため、Baiduを経由して検索し、クリックしました。 @keyup.enter.native="submitForm('loginData')" がボタンに直接追加されたので、保存後にログインページに移動して Enter キーをクリックしましたが、クリックされませんでした。仕事。その後、Baidu は、要素を使用してキーボード イベントをボタンまたは EL 入力に直接バインドする場合、最初にフォーカスを取得する必要があるため役に立たないことを発見しました。問題の解決が最優先で、次にバイドゥが優先です。正しいバインド方法を見つけました: 作成した vue のフックに次のコードを挿入すればOKです

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 でキーボード イベントをグローバルに構成する方法

キーボード Enter イベントは 1 つの page_html/css_WEB-ITnose に複数回バインドされます

以上がvue がページ キーボード イベントを実装する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。