vue 项目中使用键盘回车或空格按键触发事件

话不多说上代码！！！

一开始以为很复杂，经过一番摸索和查找，发现也没有那么难，具体如下：

1、先在 created 里边开启键盘按键的监听事件，如下：

created() {window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件
},

2、在 methods 里边添加按键之后需要执行的方法即可，具体如下：

methods:{// 回车和空格键提交右侧信息handkeyCode(e) {console.log(e); // 打印出按键后的信息if(e.keyCode === 13 || e.keyCode === 32){console.log('触发了回车/空格键');}},
}

解析：e.keyCode 是每个按键的编码，13是回车键，32是空格键

至此完成键盘按键触发事件的方法

测试有效！！！

vue 项目中使用键盘回车或空格按键触发事件相关推荐

vue项目中的回车登录
vue项目中的回车登录:(搭配element ui 的使用如果是原生,@keyup.enter="login(form)"就可以了) 在密码框上加代码:v-model=" ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
vue项目中开启Eslint碰到的一些问题及其规范
eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到 1.'layer' is defined but never used 这是定义了一个变量但是未使用到该变量 ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...
【VUE 项目中使用luckysheet（在线表格）】
VUE 项目中使用luckysheet 描述资料本地引入组件开发创建组件组件使用使用中遇到的问题 1. 后台图表chartMix报undefined 2. 回显时默认显示第一个sheet ...
vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...

vue 项目中使用键盘回车或空格按键触发事件

vue 项目中使用键盘回车或空格按键触发事件相关推荐

最新文章

热门文章