vue如何實作頁面鍵盤事件（附程式碼）

這篇文章帶給大家的內容是關於vue如何實現頁面鍵盤事件（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

我司開發項目，用的是vue elementUI，做登陸頁面的時候，點擊enter鍵的時候要實現和點擊登陸按鈕一樣的功能，所以就百度了一下，於是一通百度之後，就在點擊按鈕上面直接加入了@keyup.enter.native="submitForm('loginData')"，特麼開心的保存之後去登陸頁面點擊enter鍵竟然沒有暖子用。接著百度發現如果你用了element直接在按鈕或el-input上面綁定鍵盤事件是沒有用的，因為需要先取得焦點巴拉巴拉一大堆。解決問題是首要的，接著百度。找到了正確的綁定方法：在vue的created鉤子裡面插入如下程式碼就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事件一個頁面綁定多次_html /css_WEB-ITnose

#

以上是vue如何實作頁面鍵盤事件（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！