js 键盘按键监听，实现快捷键CTRL + S（保存）,CTRL+ Y（恢复）,CTRL+ Z（回撤）

sun_lz.

已于 2023-08-03 15:06:05 修改

阅读量6.2k

点赞数 3

分类专栏： Element Vue 文章标签： vue.js javascript

于 2021-11-04 16:06:13 首次发布

本文链接：https://blog.csdn.net/qq_42415827/article/details/121144656

版权

Element Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

添加事件

mounted() {
    window.addEventListener('keydown', this.handleEvent)
},

注销事件

beforeDestroy() {
    window.removeEventListener('keydown', this.handleEvent) // 在页面销毁的时候记得解除
},

监听方法

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
      }
    }