自定义原生JS键盘快捷键和vue-hotkey

1，需求

vue项目中用到了一些键盘快捷键操作，虽然限制很多，但还是可以实现一些需求的，这里有两种方式可以做到，手写的和别人造的轮子哦~

2，手写代码

document.onkeydown = e => {if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "b") {box.setAttribute("class", "blue");// 阻止默认事件e.preventDefault();};if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "r") {box.setAttribute("class", "red");// 阻止默认事件e.preventDefault();};
}

ps：大写字母按键和小写字母按键是有区别的，比如Ctrl + Alt + r 和Ctrl + Alt + R，如果功能比较复杂，可以使用vue插件 vue-hotkey。

3，第三方插件

这里用的是大佬造的轮子 vue-hotkey。

安装

npm i --save v-hotkey

在main.js中引入

import Vue from 'vue'
import VueHotkey from 'v-hotkey'
Vue.use(VueHotkey)

组件内用法

<template><div><span v-hotkey.prevent="keymap" v-show="show">按' ctrl + esc '切换我，按住'回车'隐藏</span></div>
</template>

简单键盘快捷键dome源码

如果看了觉得有帮助的，我是@鹏多多i，欢迎点赞关注评论；
END

公众号

往期文章

微信小程序实现上传多张本地图片到服务器和图片预览
JS实用方法DataUrl转为File、url转base64
微信小程序API交互的自定义封装

个人主页

CSDN
GitHub
简书
博客园
掘金

自定义原生JS键盘快捷键和vue-hotkey相关推荐

vue和原生js的优点分析
我的这篇文章,帮助大家分析vue相对原生js的优缺点,vue的一些好处如下: 一.控件跟数据自动绑定可以直接使用data里面的数据值来提交表单,而不需要再使用$("#myid") ...
cheatsheet 使用_使用CheatSheet快速查看任何Mac App的所有键盘快捷键
cheatsheet 使用 Keyboard shortcuts save you a lot of time, but only if you learn them. On a Mac, that ...
原生js颜色选择器取色器组件
文件结构展示文件结构目录 color-index.js config.js color - picker-index.js 上传太多代码不是很好看,,我上传的都不收费, 完整代码包点击下载如不能下载 ...
Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
vue原生js打印插件
##需求在vue单页面应用中打印目标区域 ##解决方案使用原生window.print var printhtml = window.getElementById(dom).innerHtml / ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
素描滤镜_素描fu自定义键盘快捷键
素描滤镜 Custom App Shortcuts is a little known, but handy feature of macOS. I use my keyboard instead o ...
原生JS实现文件自定义位置盖章功能并导出PDF
原生JS实现文件自定义位置盖章功能并导出PDF 实现原理在需要签章的文件上面创建一个div,可以通过移动这个div来确定签章位置,然后在通过获取这个位置把章子替换到这,并导出PDF,可以多次盖章! ...
前端使用原生js实现全局快捷键功能
目录前言一.监听键盘事件 1.开启监听 2.处理键盘事件 3.监听键盘组合键二.销毁键盘监听事件 1.注意事项 2.销毁总结前言有很多地方都需要快捷键的功能,比如在页面或者各种软件当中:当 ...

自定义原生JS键盘快捷键和vue-hotkey

目录

1，需求

2，手写代码

3，第三方插件

自定义原生JS键盘快捷键和vue-hotkey相关推荐

最新文章

热门文章