https://blog.csdn.net/qq_42415827/article/details/121144656?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~Rate-1-121144656-blog-125626225.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~Rate-1-121144656-blog-125626225.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=1
Vue 中实现快捷键CTRL + S(保存),CTRL+ Y(恢复),CTRL+ Z(回撤) 监听键盘事件
- mounted() {
- window.addEventListener('keydown', this.handleEvent)
- },
- beforeDestroy() {
- window.removeEventListener('keydown', this.handleEvent) // 在页面销毁的时候记得解除
- },
- methods: {
- async handleEvent(event) {
- switch (event.keyCode) {
- case 37:
- console.log('ctrl + ←')
- break
- case 38:
- console.log('ctrl + ↑')
- break
- case 39:
- console.log('ctrl + →')
- break
- case 40:
- console.log('ctrl + ↓')
- break
- case 67:
- console.log('ctrl + c')
- break
- case 83:
- console.log('ctrl + s')
- event.preventDefault()
- event.returnValue = false // 阻止直接保存网页
- // eslint-disable-next-line no-prototype-builtins
- if (event.ctrlKey && event.code === 'KeyS' && store.getters.forbidden.hasOwnProperty('ctrlS')) {
- // 在这里写保存需要执行的逻辑
- }
- if (event.ctrlKey && event.code === 'KeyS') return false
- break
- case 86:
- console.log('ctrl + v')
- break
- case 89:
- console.log('ctrl + y')
- if (event.ctrlKey && event.code === 'KeyY') {
- this.$router.go(+1)
- }
- break
- case 90:
- if (this.$route.path === '登录成功重定向的路由,比如控制台:/dashboard') return // 防止退出项目
- if (event.ctrlKey && event.code === 'KeyZ') {
- this.$router.go(-1)
- }
- break
- }
- }
- }