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 ...
随机推荐
- spring history
Spring框架是由于软件开发的复杂性而创建的.Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spring的用途不仅仅限于服务器端的开发.从简单性.可测试性和松耦 ...
- 前后端token机制 识别用户登录信息
Token,就是令牌,最大的特点就是随机性,不可预测.一般黑客或软件无法猜测出来. 那么,Token有什么作用?又是什么原理呢? Token一般用在两个地方: 1)防止表单重复提交. 2)anti c ...
- POJ-3450 Corporate Identity (KMP+后缀数组)
Description Beside other services, ACM helps companies to clearly state their “corporate identity”, ...
- 【C/C++】数组 & 指针
int main() { ]; ]; ][]; ]; ]; ]; ][]; cout << sizeof(a) << endl; cout << sizeof(pa ...
- lxml 解析字符处理规则
规则1:无论输入的字符串是何种状态,lxml包接收后一律转换成unicode,其处理结果也是unicodetype,输出到文件时,需要指定编码,转换成特定的stringtype状态.规则2:lxml用 ...
- TCP协议,UDP,以及TCP通信服务器的文件传输
TCP通信过程 下图是一次TCP通讯的时序图.TCP连接建立断开.包含大家熟知的三次握手和四次握手. 在这个例子中,首先客户端主动发起连接.发送请求,然后服务器端响应请求,然后客户端主动关闭连接.两条 ...
- 16、for-of循环
forEach不支持break for-in把数组当做对象来遍历,但是只能遍历出索引值 for-of循环可以遍历出数组的每一项值,支持break 1.for-in示范: 2.for-of示范 3.fo ...
- 乐观锁vs悲观锁, 集群vs分布式 , 微服务, 幂等性
乐观锁: 总认为不会产生并发问题,因此不会上锁,更新时会判断其他线程在这之前有没有对数据进行修改,一般会使用版本号机制或CAS操作来实现 version: 数据上有数据版本号version字段,每次更 ...
- Elixir东游记/上:intro/1
1. 为啥前面还在搞haxe,现在又换到elixir了? erlang本来我就在用,用elixir不过是方便顺手给人科普而已. 2. so,接下来你打算用elixir干嘛? 很简单,写一个简单的解释器 ...
- 获取Promise的值
//response.text()是一个promise对象 //通过then方法获取promise存的数据 response.text().then(val => { errObj = JSON ...