Vue页面监听键盘按键的多种方法

在Vue中，可以通过以下几种方法来监听键盘按键：

1. 使用v-on指令直接在模板中监听键盘事件。
2. 在mounted钩子中使用原生JavaScript的addEventListener方法。
3. 使用Vue提供的Vue.directive自定义指令来创建一个全局自定义键盘监听指令。

以下是每种方法的示例代码：

1. 使用v-on指令：

<template>
  <div @keyup.enter="onEnterPress">
    <!-- 按下 Enter 键时调用 onEnterPress 方法 -->
  </div>
</template>
 
<script>
export default {
  methods: {
    onEnterPress() {
      console.log('Enter key pressed');
    }
  }
}
</script>

2. 在mounted钩子中使用addEventListener：

<template>
  <div>
    <!-- 在这个元素上按键事件将被监听 -->
  </div>
</template>
 
<script>
export default {
  mounted() {
    window.addEventListener('keyup', this.onKeyUp);
  },
  beforeDestroy() {
    window.removeEventListener('keyup', this.onKeyUp);
  },
  methods: {
    onKeyUp(event) {
      if (event.key === 'Enter') {
        console.log('Enter key pressed');
      }
    }
  }
}
</script>

3. 使用自定义指令：

<template>
  <div v-on-key.enter="onEnterPress">
    <!-- 按下 Enter 键时调用 onEnterPress 方法 -->
  </div>
</template>
 
<script>
Vue.directive('on-key', {
  bind(el, binding, vnode) {
    el.addEventListener('keyup', e => {
      if (e.key === binding.arg) {
        binding.value(e);
      }
    });
  }
});
 
export default {
  methods: {
    onEnterPress() {
      console.log('Enter key pressed');
    }
  }
}
</script>

以上代码提供了三种监听键盘按键的方法，可以根据实际需求选择合适的方式。