vue がページキーボードイベントを実装する方法 (コード付き)-jsチュートリアル-php.cn

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

不言

リリース： 2018-08-17 15:33:58

オリジナル

5112 人が閲覧しました

この記事の内容は、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(&#39;loginData&#39;);
                }
            }
        }

ログイン後にコピー

ちなみにログインコードも載せておきました:

methods: {
            submitForm(formName) {
                var _self = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       getInfo.post(&#39;api-token-auth/&#39;,{username:_self.loginData.userCount,password:_self.loginData.password}).then(function(data){
                            if(data.data.code == 0){
                                let jwtSession = &#39;JWT&#39;+&#39; &#39;+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(&#39;routes&#39;));
                                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("验证没通过！")
                    }
                });
            },
            
        },

ログイン後にコピー

以上で完了です。