vue添加頁面鍵盤事件


我司開發項目,用的是vue+elementUI,做登陸頁面的時候,點擊enter鍵的時候要實現和點擊登陸按鈕一樣的功能,所以就百度了一下,於是一通百度之后,就在點擊按鈕上面直接添加了@keyup.enter.native="submitForm('loginData')",特么開心的保存之后去登陸頁面點擊enter鍵竟然沒有暖子用。接着百度發現如果你用了element直接在按鈕或者el-input上面綁定鍵盤事件是沒有用的,因為需要先獲取焦點巴拉巴拉一大堆。解決問題是首要的,接着百度。找到了正確的綁定方法:在vue的created鈎子里面插入如下代碼就ojbk

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

順便把我的登陸代碼也貼上來:

 1 methods: {
 2             submitForm(formName) {
 3                 var _self = this;
 4                 this.$refs[formName].validate((valid) => {
 5                     if (valid) {
 6                        getInfo.post('api-token-auth/',{username:_self.loginData.userCount,password:_self.loginData.password}).then(function(data){
 7                             if(data.data.code == 0){
 8                                 let jwtSession = 'JWT'+' '+data.data.token;
 9                                 localStorage.setItem("checkSession", jwtSession);
10                                 localStorage.setItem("userInfo", data.data.userinfo.username);
11                                 localStorage.setItem("routes",JSON.stringify(data.data.userinfo.permissions))
12                                 // 路由權限過濾
13                                 var menuData = JSON.parse(localStorage.getItem('routes'));
14                                 var localRouter = _self.$router.options.routes
15                                 for(let i = 0;i<menuData.length;i++){
16                                   for(let q = 0;q<localRouter.length;q++){
17                                     if(menuData[i].codename == localRouter[q].path.replace(/\//,"")){
18                                       localRouter[q].hidden = false;
19                                     } 
20                                   }
21                                 }
22                                 _self.$router.addRoutes(localRouter)
23                                 _self.$router.push({ path: '/ops_menu_sever_manage'});
24                             }
25                             else{
26                                 _self.$message({
27                                     message: data.data.msg,
28                                     type: 'warning'
29                                 });
30                                 // _self.$router.push({ path: '/login'});
31                             }
32                             
33                        });
34                     } else {
35                         console.log("驗證沒通過!")
36                     }
37                 });
38             },
39             
40         },

如此,大功告成。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM