我司开发项目,用的是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