我司開發項目,用的是vue+elementUI,作登錄頁面的時候,點擊enter鍵的時候要實現和點擊登錄按鈕同樣的功能,因此就百度了一下,因而一通百度以後,就在點擊按鈕上面直接添加了@keyup.enter.native="submitForm('loginData')",特麼開心的保存以後去登錄頁面點擊enter鍵居然沒有暖子用。接着百度發現若是你用了element直接在按鈕或者el-input上面綁定鍵盤事件是沒有用的,由於須要先獲取焦點巴拉巴拉一大堆。解決問題是首要的,接着百度。找到了正確的綁定方法:在vue的created鉤子裏面插入以下代碼就ojbkvue
created(){ var _self = this; document.onkeydown = function(e){ var key = window.event.keyCode; if(key == 13){ _self.submitForm('loginData'); } } }
順便把個人登錄代碼也貼上來:api
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 },
如此,大功告成。post