Vue页面监听键盘按键的方法总结

<template>
  <div>
    <input type="text" @keydown.enter="handleEnterKey" />
  </div>
</template>
<script>
export default {
  methods: {
    handleEnterKey() {
      // 处理回车键按下事件
    },
  },
};
</script>

<template>
  <div>
    <input type="text" v-on:keydown.enter="handleEnterKey" />
  </div>
</template>
<script>
export default {
  methods: {
    handleEnterKey() {
      // 处理回车键按下事件
    },
  },
};
</script>

<template>
  <div></div>
</template>
<script>
export default {
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'Enter') {
        // 处理回车键按下事件
      }
    },
  },
};
</script>

<template>
  <div>
    <input type="text" v-shortkey.enter="handleEnterKey" />
  </div>
</template>
<script>
import VueShortkey from 'vue-shortkey';
export default {
  directives: {
    shortkey: VueShortkey,
  },
  methods: {
    handleEnterKey() {
      // 处理回车键按下事件
    },
  },
};
</script>

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.input.addEventListener('keydown', this.handleKeyDown);
  },
  beforeUnmount() {
    this.$refs.input.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'Enter') {
        // 处理回车键按下事件
      }
    },
  },
};
</script>

<template>
  <div></div>
</template>
<script>
export default {
  name: 'KeyboardEventListener',
  props: {
    event: {
      type: String,
      required: true,
    },
  },
  mounted() {
    window.addEventListener(this.event, this.handleEvent);
  },
  beforeUnmount() {
    window.removeEventListener(this.event, this.handleEvent);
  },
  methods: {
    handleEvent(event) {
      this.$emit('keydown', event);
    },
  },
};
</script>

<template>
  <div>
    <KeyboardEventListener event="keydown.enter" @keydown="handleEnterKey" />
  </div>
</template>
<script>
import KeyboardEventListener from '@/components/KeyboardEventListener.vue';
export default {
  components: {
    KeyboardEventListener,
  },
  methods: {
    handleEnterKey(event) {
      // 处理回车键按下事件
    },
  },
};
</script>