vue如何实现页面键盘事件（附代码）

来源：动视网责编：小采时间：2020-11-27 19:32:10

vue如何实现页面键盘事件（附代码）

vue如何实现页面键盘事件（附代码）:本篇文章给大家带来的内容是关于vue如何实现页面键盘事件（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我司开发项目，用的是vue+elementUI，做登陆页面的时候，点击enter键的时候要实现和点击登陆按钮一样的功能，所以就百度

推荐度：

点击下载本文 文档为doc格式

导读vue如何实现页面键盘事件（附代码）:本篇文章给大家带来的内容是关于vue如何实现页面键盘事件（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我司开发项目，用的是vue+elementUI，做登陆页面的时候，点击enter键的时候要实现和点击登陆按钮一样的功能，所以就百度

本篇文章给大家带来的内容是关于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如何实现页面键盘事件（附代码）

推荐度：

点击下载本文 文档为doc格式

标签：键盘如何 VUE

热门焦点

vue如何实现页面键盘事件（附代码）

vue如何实现页面键盘事件（附代码）

vue如何实现页面键盘事件（附代码）

最新推荐

猜你喜欢

热门推荐