vue鍵盤事件監聽

1、在當前頁截獲鍵盤事件，所有按鈕均被控制

  created () {
    this.keyDown();
  },
  beforeDestroy () {
    this.keyDownReview()
  },
  methods: {
    //按鍵恢復
    keyDownReview () {
      document.onkeydown = function (event) {
        var e = event || window.event;
        e.returnValue = true;
      }
    },
    //按鈕監聽鍵盤
    keyDown () {
      //監聽鍵盤按鈕
      document.onkeydown = function (event) {
        var e = event || window.event;
        var keyCode = e.keyCode || e.which;
        switch (keyCode) {
          case 112://F1
            alert('F1')
            break;
          case 113://F2
            alert('F2')
            break;
          case 117://F6
            alert('F6')
            break;
          case 119://F8
            alert('F8')
            break;
          case 13://enter
            alert('enter')
            break;
          default:
            break;
        }
        if (e && e.preventDefault) {
          e.preventDefault();
        } else {
          window.event.returnValue = false;
        }
      }
    },
}

2、單一按鈕通過單一鍵盤鍵控制，其他不受影響

<el-button type="primary" @click="refresh">刷新(F1)</el-button>

  created () {
    this.keyDown()
  },
  beforeDestroy () {
    this.keyDownReview()
  },
  methods: {
    //按鍵恢復
    keyDownReview () {
      document.onkeydown = function (event) {
        var e = event || window.event;
        e.returnValue = true;
      }
    },
    //鍵盤按鈕截獲
    keyDown () {
      document.onkeydown = e => {
        //112表示F1鍵
        if (e.keyCode === 112) {
          //F1鍵后執行刷新方法
          this.refresh()
          //取消原來的后續事件
          e.preventDefault()
        }
      }
    },
    refresh () {
      alert('refresh')
    },
}

 

3、詳細keyCode值列表