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 ...
随机推荐
- vuex 改变状态值得命名问题
今天在做vuex的状态的时候 发现了个奇葩的问题,后面解决了,在改变状态的值得时候 传值的名称 不要和定义的状态的名称值相同,要不然会报错,如图所示 也就是password的名称不能相同,要不监测不到 ...
- iview table 实现在数据中自定义标识
做了一个商旅订票的项目,在详情中有一个因公超标在表格中用一个“超”字显示的需求.后台框架用的iview+vue,也就是在iview Table中改变.在iview的框架中改变东西首先要想到的是ivie ...
- 微信小程序 swiper轮播 自定义indicator-dots样式
index.wxml <view class="swiperContainer"> <swiper bindchange="swiperChange&q ...
- HttpUrlConnection流传输问题(正确传输包含中文的JSON字符串)
目前在写一个功能,主要是使用 HttpURLConnection 发送http请求调用外部接口.本来一切正常的,可是在发送post请求上传数据给服务端时,服务端返回错误信息:获取的JSON请求是乱码的 ...
- 毕设记录(ajax第一次请求失败,之后成功的问题)
解决方法:将button标签的type属性改为button,而不是submit,将会解决此问题,至于原因,,,还是没太搞清楚..
- 强化学习(六):n-step Bootstrapping
n-step Bootstrapping n-step 方法将Monte Carlo 与 one-step TD统一起来. n-step 方法作为 eligibility traces 的引入,eli ...
- xshell6 同时操作多个终端
当我们使用Xshell的时候,有时候需要同时建立多个会话,连接不同的服务器或者不同的用户,如何同时向所有会话发送同一指令呢?方法如下: 1.依次点击 查看 ---> 撰写 ---> 撰写 ...
- mysql锁分析相关的几个系统视图
1.infomation_schema.innodb_lock_waits+-------------------+-------------+------+-----+---------+----- ...
- js 如何判断数组元素是否存在重复项
1.如何判断数组元素是否存在重复项 1)定义测试数组 //定义测试的数组(1个没有重复元素,1个有重复元素) var arr1 = new Array("111","33 ...
- linux服务器开机启动tomcat
程序自启动脚本实质上就是一个shell脚本.以简单的Tomcat自启动脚本为例,Tomcat使用安装目录下的startup.sh启动.shutdown.sh停止,我们可以把它们写到一个启动脚本里. 1 ...