vue添加页面键盘事件
我司开发项目,用的是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添加页面键盘事件的更多相关文章
- 29.VUE学习之--键盘事件.键盘修饰符的实例讲解
键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- vue中触发键盘事件的两种方法和如何自定义键位事件,完整代码!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- openGL 初试 绘制三角形 和添加鼠标键盘事件
code: #include <gl/glut.h> #include <stdlib.h> void render(void); void keyboard(unsigned ...
- vue 全局配置键盘事件
在main.js配置 Vue.config.keyCodes.f1 = 112 然后可以在页面上@keyup.f12='demo' demo(){ console.log('demo')}
- vue中的键盘事件
@keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起) 获取按键的键码 e.keyCode @keyup.13 按回车键 @keyup.enter ...
- day48—JavaScript键盘事件
转行学开发,代码100天——2018-05-03 今天继续学习JavaScript事件基础之键盘事件. 键盘代号获取 keyCode 键盘事件:onkeydown onkeyup 如通过键盘上下左右按 ...
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
- 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 ...
随机推荐
- java,优先队列的用法
像C++语言一样,java中,也有包装好的优先队列类PriorityQueue. 用法如下(模板代码): 工作安排问题: 问题描述:设有n件工作分配给n个人,将工作i分配给第j个人所需的费用为cij. ...
- java之JVM(一)
内存模型: Java内存模型建立在自动内存管理的概念之上.当一个对象不再被一个应用所引用,垃圾回收器就会回收它,从而释放相应的内存. JVM从底层操作系统中分配内存,并将它们分为以下几个区域: 方法区 ...
- sqlserver 查询表锁死,解除表锁死
查询锁死的表名以及ID select request_session_id id, OBJECT_NAME(resource_associated_entity_id) tableName FROM ...
- python 字典 dict 该注意的一些操作
在用python处理dict 的时候,有几个该注意的地方,这里跟大家提一下: 1)操作dict 时,尽量少产生新的列表对象.比如: 遍历dict的时候,如果用 dic = {"a" ...
- java 形式参数和实际参数的区别
1.形参不能离开方法.形参只有在方法内才会发生作用,也只有在方法中使用,不会在方法外可见.而实参可以再程序的任何地方都使用.
- C++标准模板库(STL)之Pair
1.Pair的常用用法 pair:两个元素绑在一起作为一个合成元素.可以看成是两个元素的结构体. struct pair { typeName1 first; typeName2 second; }; ...
- js简单封装样式
class Foo{ constructor(name) { this.name = name } greet() { console.log('hello this is',this.name) } ...
- nginx非root安装
nginx非root安装 唯一需要解决的就是指定安装目录 这里使用nginx相关包如下 nginx-1.14.0.tar.gz 安装需要依赖如下2个包 pcre-8.42.tar.gz zlib-1. ...
- 原生Android 注意事项
如果要访问 互联网上的json数据的话 就要在 该目录下添加 访问的权限: <uses-permission android:name="android.permission.INTE ...
- flask 第七章 简陋版智能玩具 +MongoDB初识和基本操作
1.简陋版web智能玩具 FAQ.py文件 import os from aip import AipSpeech, AipNlp from uuid import uuid4 "" ...