当前位置：首页 > VUE

vue实现键盘操作

2026-01-15 05:17:45VUE

Vue 实现键盘操作的方法

在 Vue 中实现键盘操作通常涉及监听键盘事件并触发相应的逻辑。以下是几种常见的方法：

使用 `v-on` 指令监听键盘事件

在模板中直接使用 v-on 或 @ 监听键盘事件，可以指定按键修饰符。

<template>
  <input @keyup.enter="handleEnter" @keydown.esc="handleEsc" />
</template>

<script>
export default {
  methods: {
    handleEnter() {
      console.log('Enter key pressed');
    },
    handleEsc() {
      console.log('Escape key pressed');
    }
  }
};
</script>

使用 `addEventListener` 监听全局键盘事件

在组件生命周期钩子中手动添加和移除事件监听器，适用于全局键盘操作。

<script>
export default {
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'ArrowUp') {
        console.log('ArrowUp key pressed');
      }
    }
  }
};
</script>

使用第三方库 `vueuse` 的 `useKeyboard`

@vueuse/core 提供了 useKeyboard 工具，简化键盘事件监听。

<script setup>
import { useKeyboard } from '@vueuse/core';

const { pressed } = useKeyboard();
</script>

<template>
  <div v-if="pressed.Enter">Enter key is pressed</div>
</template>

自定义指令实现键盘监听

通过自定义指令封装键盘事件逻辑，便于复用。

// 全局注册自定义指令
app.directive('keypress', {
  mounted(el, binding) {
    el._keyHandler = (e) => {
      if (e.key === binding.arg) {
        binding.value();
      }
    };
    document.addEventListener('keydown', el._keyHandler);
  },
  unmounted(el) {
    document.removeEventListener('keydown', el._keyHandler);
  }
});

使用方式：

<template>
  <div v-keypress:enter="handleEnter">Press Enter</div>
</template>

键盘事件修饰符

Vue 提供了一些常用的键盘事件修饰符，如 .enter、.esc、.tab 等，可以直接在模板中使用。

<template>
  <input @keyup.space="handleSpace" />
</template>

动态监听按键组合

通过检查 event.key 和 event.ctrlKey、event.shiftKey 等属性实现组合键监听。

methods: {
  handleKeyDown(event) {
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      console.log('Ctrl+S pressed');
    }
  }
}