我司开发项目,用的是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. django+nginx+gunicorn+pipenv微信小程序实践笔记

    一.我采用pipenv来管理虚拟环境,在本地新建虚拟环境: mkdir wxProject #进入环境目录,创建虚拟环境 pipenv install #激活虚拟环境 pipenv shell #然后 ...

  2. C# 指定程序打开指定文件

    Process process = new Process(); process.StartInfo.FileName = 指定程序exe文件路径: process.StartInfo.Argumen ...

  3. jquery 点击显示更多

    点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent" ...

  4. redist命令操作(二)--哈希Hash,列表List

    1.Redis 哈希(Hash) 参考菜鸟教程:http://www.runoob.com/redis/redis-hashes.html Redis hash 是一个string类型的field和v ...

  5. 记一次简单的sql注入

     什么是sql注入攻击?  所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影 ...

  6. 小程序input组件获得焦点时placeholder内容有重影

    这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...

  7. 小程序getLocation出现的各种问题汇总

    1.小程序无法弹出授权位置的弹框: 需要在app.json中增加相关配置文件: "permission": { "scope.userLocation": { ...

  8. c# 多线程简化

    编译器自动推断出ParameterizedThreadStart委托,因为Go方法接收一个单独的object参数,就像这样写: 1 2 Thread t = new Thread (new Param ...

  9. QT:QHash的使用

    QHash<QPointF, QVector<float>> data; 此时会报错说没有声明QPointF的Key类型 需要我们手动实现一个函数 static uint qH ...

  10. 解决Eclipse中.properties文件中文乱码问题

    在.properties文件写注释时,发现中文乱码了,由于之前在idea中有见设置.properties文件的编码类型,便找了找乱码原因 在中文操作系统中,Eclipse中的Java类型文件的编码的默 ...