Vue.js中如何创建监听Ctrl+[1-9]快捷键的监听器并简化代码

嘿，这个问题我之前也碰到过，用范围判断就能轻松摆脱重复的if语句，给你两种简洁易维护的实现方式：

方案一：直接判断event.key的数字范围 #

这种方式最直观，因为event.key会直接返回你按下的字符（比如按1就返回"1"），结合正则或者数值范围判断就行：

created() {
  window.addEventListener('keydown', this.switchTab)
},
methods: {
  switchTab(event) {
    // 检查Ctrl键是否按下，同时按下的是1-9的数字
    if (event.ctrlKey && /^[1-9]$/.test(event.key)) {
      const pressedNumber = parseInt(event.key, 10);
      this.changeRoute(pressedNumber);
    }
  },
  changeRoute(pressedNumber) {
    console.log(pressedNumber);
  }
}

小解释： #

• 正则/^[1-9]$/可以快速校验event.key是不是1-9的单个数字字符
• 用parseInt把字符串转成数字，直接传给changeRoute就能满足你的需求

方案二：利用event.keyCode的数值范围 #

如果你更习惯用keyCode（虽然它的标准已被标记为废弃，但现代浏览器里依然稳定可用），1-9对应的keyCode是49到57，直接做范围判断就行：

created() {
  window.addEventListener('keydown', this.switchTab)
},
methods: {
  switchTab(event) {
    if (event.ctrlKey && event.keyCode >= 49 && event.keyCode <= 57) {
      // keyCode49对应数字1，减去48就能得到实际按下的数字
      const pressedNumber = event.keyCode - 48;
      this.changeRoute(pressedNumber);
    }
  },
  changeRoute(pressedNumber) {
    console.log(pressedNumber);
  }
}

补充：你的自解方案优化 #

看到你已经自己摸索出了核心思路，这里可以再调整一下，直接把数字传给changeRoute，完全贴合你的需求：

switchTab(event) {
  if (event.ctrlKey && event.key >= '1' && event.key <= '9') {
    const pressedNumber = parseInt(event.key, 10);
    this.changeRoute(pressedNumber);
  }
},
changeRoute(pressedNumber) {
  console.log(pressedNumber);
}

这样就完美实现了监听Ctrl+1-9的需求，代码简洁还容易维护~

内容的提问来源于stack exchange，提问作者Un1