本篇文章给大家带来的内容是关于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: '/ops_menu_sever_manage'}); } else{ _self.$message({ message: data.data.msg, type: 'warning' }); // _self.$router.push({ path: '/login'}); } }); } else { console.log("验证没通过！") } }); }, },
如此，大功告成。
相关推荐：
vue怎样全局配置键盘事件
键盘enter事件一个页面绑定多次_html/css_web-itnose
以上就是vue如何实现页面键盘事件（附代码）的详细内容。