如何在Vue.js中检测键盘按键并触发声音播放？

嗨，作为Vue新手能想到用键盘事件来触发声音播放，这点很棒！其实实现起来并不复杂，下面给你两种实用的方案，你可以根据需求选择：

方案一：在根元素上绑定键盘事件 #

你可以直接在Vue挂载的根元素（比如#app）上绑定keyup事件，配合Vue的按键修饰符就能轻松指定触发的按键，比如回车键：

<div id="app" @keyup.enter="playSound('path/to/mp3')">
  <!-- 你的页面内容 -->
</div>

<script>
new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    playSound (sound) {
      if(sound) {
        var audio = new Audio(sound);
        audio.play();
      }
    }
  }
});
</script>

这里用@keyup.enter替代了数字13，可读性更强，Vue支持很多这类按键别名，比如@keyup.space（空格键）、@keyup.tab（Tab键）等等。需要注意的是，这种方式下根元素需要获得焦点才能监听到键盘事件，如果想让页面任何地方都能触发，可以给根元素加上tabindex="0"属性。

方案二：全局监听键盘事件（DOM就绪后自动生效） #

如果希望页面加载完成后，不管焦点在哪都能监听到键盘事件，可以在Vue的mounted钩子中添加原生的事件监听器：

<div id="app">
  <!-- 你的页面内容 -->
</div>

<script>
new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    playSound (sound) {
      if(sound) {
        var audio = new Audio(sound);
        audio.play();
      }
    }
  },
  mounted() {
    // DOM就绪后添加全局键盘监听
    const handleKeyUp = (e) => {
      // 监听回车键（keyCode 13）
      if(e.keyCode === 13) {
        this.playSound('path/to/mp3');
      }
      // 可以添加更多按键判断，比如空格键
      // if(e.keyCode === 32) {
      //   this.playSound('path/to/another/mp3');
      // }
    }
    document.addEventListener('keyup', handleKeyUp);
    // 把方法存到实例上，方便销毁时移除监听
    this.handleKeyUp = handleKeyUp;
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听，避免内存泄漏
    document.removeEventListener('keyup', this.handleKeyUp);
  }
});
</script>

这个方案的好处是，页面加载完成后立刻就能监听键盘事件，不需要元素获取焦点。另外记得在组件销毁前移除事件监听，避免内存泄漏哦。

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