我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.enter.native="submitForm('loginData')",特么开心的保存之后去登陆页面点击enter键竟然没有暖子用。接着百度发现如果你用了element直接在按钮或者el-input上面绑定键盘事件是没有用的,因为需要先获取焦点巴拉巴拉一大堆。解决问题是首要的,接着百度。找到了正确的绑定方法:在vue的created钩子里面插入如下代码就ojbk

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添加页面键盘事件的更多相关文章

  1. 29.VUE学习之--键盘事件.键盘修饰符的实例讲解

    键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. vue中触发键盘事件的两种方法和如何自定义键位事件,完整代码!

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. openGL 初试 绘制三角形 和添加鼠标键盘事件

    code: #include <gl/glut.h> #include <stdlib.h> void render(void); void keyboard(unsigned ...

  4. vue 全局配置键盘事件

    在main.js配置   Vue.config.keyCodes.f1 = 112 然后可以在页面上@keyup.f12='demo' demo(){ console.log('demo')}

  5. vue中的键盘事件

    @keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起) 获取按键的键码 e.keyCode @keyup.13     按回车键 @keyup.enter ...

  6. day48—JavaScript键盘事件

    转行学开发,代码100天——2018-05-03 今天继续学习JavaScript事件基础之键盘事件. 键盘代号获取 keyCode 键盘事件:onkeydown onkeyup 如通过键盘上下左右按 ...

  7. vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  8. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  9. Vue学习之--------事件的基本使用、事件修饰符、键盘事件(2022/7/7)

    文章目录 1.事件处理 1.1. 事件的基本使用 1.1.1 .基础知识 1.1.2. 代码实例 1.1.3.测试效果 1.2.事件修饰符 1.2.1. 基础知识 1.2.2 .代码实例 1.2.3 ...

随机推荐

  1. document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...

  2. git之我常用的命令

    撤销修改: git checkout -- file 撤销暂存区: git reset HEAD git reset HEAD file 撤销版本库:git reset --hard HEAD^回到上 ...

  3. 【安全测试】如何利用短信验证码BUG浪费公司的钱

    一.背景 公司新产品体验,发现不少交互.UI.功能设计上的小问题.于是花了点时间随意挑了几个功能深入的玩了一下,顺手提了BUG.接口层,看了一下接口文档,简单测了一下接口,BUG其实还挺严重的,后面详 ...

  4. python第三方库------jieba库(中文分词)

    jieba“结巴”中文分词:做最好的 Python 中文分词组件 github:https://github.com/fxsjy/jieba 特点支持三种分词模式: 精确模式,试图将句子最精确地切开, ...

  5. POJO、JavaBean、DTO的区别

    一.POJO(Plain Ordinary Java Object)简单的Java对象,其中有一些属性及其getter setter方法的类,没有业务逻辑(重点理解一下"没有业务逻辑&quo ...

  6. ts文件分析(纯c解析代码)

    参考链接: 1. MPEG-2 TS码流分析 https://blog.csdn.net/zhubin215130/article/details/8958567 TS Header PAT PMT ...

  7. .net公众号开发自动回复消息

    using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web. ...

  8. 一个入门rpc框架的学习

    一个入门rpc框架的学习 参考 huangyong-rpc 轻量级分布式RPC框架 该程序是一个短连接的rpc实现 简介 RPC,即 Remote Procedure Call(远程过程调用),说得通 ...

  9. angular $resouse服务

    创建服务 var taskInstancesResource = function ($resource) { var resource = $resource('/ssc-cutover/rest/ ...

  10. [2003_p1]乒乓球

    一道因为输出不一样疯狂超时的题目(是我太菜,但是我jio得代码是ok的) 题目描述 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改革引起了很大的 ...