欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

vue如何实现页面键盘事件(附代码)

程序员文章站 2022-04-03 20:13:35
...
本篇文章给大家带来的内容是关于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如何实现页面键盘事件(附代码)的详细内容,更多请关注其它相关文章!

相关标签: 键盘事件