Vue键盘事件用法总结

Vue键盘事件用法总结

1. 概述

Vue 提供了多种方式监听键盘事件，通过使用修饰符或者组合键来响应各种操作。本文将总结常用的 Vue 键盘事件的用法。

2. 事件修饰符

在 Vue 中，可以使用如下修饰符来监听键盘事件：

• .enter：按下回车键时触发；
• .tab：按下 tab 键时触发；
• .delete：按下删除或退格键时触发；
• .esc：按下 Esc 键时触发；
• .space：按下空格键时触发；
• .up：按下上箭头键时触发；
• .down：按下下箭头键时触发；
• .left：按下左箭头键时触发；
• .right：按下右箭头键时触发。

使用示例：

<template>
  <div>
    <input @keyup.enter="onEnter" placeholder="按下回车键" />
    <input @keyup.tab="onTab" placeholder="按下 tab 键" />
    <input @keyup.delete="onDelete" placeholder="按下删除或退格键" />
    <input @keyup.esc="onEsc" placeholder="按下 Esc 键" />
    <input @keyup.space="onSpace" placeholder="按下空格键" />
    <input @keyup.up="onUp" placeholder="按下上箭头键" />
    <input @keyup.down="onDown" placeholder="按下下箭头键" />
    <input @keyup.left="onLeft" placeholder="按下左箭头键" />
    <input @keyup.right="onRight" placeholder="按下右箭头键" />
  </div>
</template>

<script>
export default {
  methods: {
    onEnter() {},
    onTab() {},
    onDelete() {},
    onEsc() {},
    onSpace() {},
    onUp() {},
    onDown() {},
    onLeft() {},
    onRight() {},
  },
}
</script>

3. 组合键

Vue 还支持使用组合键监听键盘事件，组合键是由多个按键组合而成的，可以使用 .ctrl、.alt、.shift 和 .meta 来表示：

• .ctrl：按下 ctrl 键时触发；
• .alt：按下 alt 键时触发；
• .shift：按下 shift 键时触发；
• .meta：按下 meta（command/windows）键时触发。

使用示例：

<template>
  <div>
    <input @keydown.ctrl.enter="onCtrlEnter" placeholder="按下 Ctrl + Enter 组合键" />
    <input @keydown.alt.space="onAltSpace" placeholder="按下 Alt + 空格 组合键" />
    <input @keydown.shift.delete="onShiftDelete" placeholder="按下 Shift + 删除键 组合键" />
    <input @keydown.meta.c="onMetaC" placeholder="按下 Command/Ctrl + C 组合键" />
  </div>
</template>

<script>
export default {
  methods: {
    onCtrlEnter() {},
    onAltSpace() {},
    onShiftDelete() {},
    onMetaC() {},
  },
}
</script>

4. 自定义键位别名

当事件的监听器太过庞大或看起来冗长时，可以为常用的键位设置别名：

<template>
  <div>
    <input @keydown.enter="onEnter" placeholder="按下 enter 键（未设置别名）" />
    <input @keydown.ctrl.prevent="onCtrlS" placeholder="按下 Ctrl + S 组合键（设置别名）" />
  </div>
</template>

<script>
export default {
  methods: {
    onEnter() {},
    onCtrlS() {},
  },
  created() {
    // 为 Ctrl + S 设置别名
    this.$eventHub.$once('keydown.control.s', (event) => {
      event.preventDefault()
      this.onCtrlS()
    })
  },
  beforeDestroy() {
    this.$eventHub.$off('keydown.control.s')
  },
}
</script>

上述代码在 created 钩子中监听了一个自定义的 keydown.control.s 事件并设定了别名，如果用户按下了 Ctrl + S 组合键，事件监听器将会拦截事件，并阻止默认行为（例如保存表单数据），然后调用 this.onCtrlS() 方法。

5. 封装一个通用的键盘事件监听组件

为了方便使用键盘事件，我们可以封装一个通用的键盘事件监听组件：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    event: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.$el.addEventListener('keydown', this.handleEvent)
  },
  beforeDestroy() {
    this.$el.removeEventListener('keydown', this.handleEvent)
  },
  methods: {
    handleEvent(event) {
      if (event.code === this.event) {
        this.$emit('keydown', event)
      }
    },
  },
}
</script>

使用示例：

<template>
  <div>
    <!-- 使用常量的键位名称 -->
    <KeyboardEventListeners :eventCode="KeyboardEventListeners.ENTER" @keydown.enter="onEnter" />

    <!-- 使用自定义的键位名称 -->
    <KeyboardEventListeners event="keydown.control.s" @keydown="onCtrlS" />

    <!-- 使用自定义的键位名称和回调函数 -->
    <KeyboardEventListeners event="keydown.control.z" @keydown="onCtrlZ" />
  </div>
</template>

<script>
import KeyboardEventListeners from './components/KeyboardEventListeners.vue'

export default {
  components: {
    KeyboardEventListeners,
  },
  methods: {
    onEnter() {},
    onCtrlS() {},
    onCtrlZ(event) {
      // 拦截事件并打印当前的光标位置
      console.log(event.target.selectionStart)
      console.log(event.target.selectionEnd)
    },
  },
}
</script>

上述代码使用了 KeyboardEventListeners 组件封装了键盘事件监听功能，通过传递不同的 event prop 和添加不同的事件监听器来进行响应。其中，.ENTER 是 KeyboardEventListeners 提供的常量，代表回车键的键位名称。对于用户自定义的事件名称，我们只需传递完整的事件名称即可。

本文总结了 Vue 中常见的键盘事件用法，从事件修饰符、组合键、自定义键位别名和封装通用组件等方面进行了讲解。希望对你在 Vue 项目中应用键盘事件有所帮助。