Vue.js中为按钮添加键盘快捷键：按上箭头触发点击方法

你可以通过两种方式实现按下上箭头触发doSomething方法：

方式一：给按钮绑定按键事件 #

利用Vue的按键修饰符，直接给按钮添加@keydown.up事件绑定，当按钮处于聚焦状态时，按下上箭头就会触发方法。如果希望页面加载时按钮自动聚焦，加上autofocus属性即可。

<button autofocus @click="doSomething()" @keydown.up="doSomething()"> PRESS ME </button>

<script>
export default {
  methods: {
    doSomething(){
      console.log('clicked')
    }
  }
}
</script>

方式二：全局监听键盘事件 #

如果希望不管按钮是否聚焦，按下上箭头都能触发方法，可以在组件的生命周期钩子中给window绑定键盘事件，记得在组件销毁前移除监听，避免内存泄漏。

<button @click="doSomething()"> PRESS ME </button>

<script>
export default {
  methods: {
    doSomething(){
      console.log('clicked')
    }
  },
  mounted() {
    // 定义监听函数
    this.handleKeyDown = (e) => {
      if (e.key === 'ArrowUp') {
        this.doSomething()
      }
    }
    window.addEventListener('keydown', this.handleKeyDown)
  },
  beforeUnmount() {
    // 移除监听
    window.removeEventListener('keydown', this.handleKeyDown)
  }
}
</script>

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