按键修饰符

# 题目

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符：，例如：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

<template>
  <!-- 添加按键修饰符让即使 Alt 或 Shift 被一同按下时也会触发 -->
  <button @click="onClick1">A</button>

  <!-- 添加按键修饰符让有且只有 Shift 被按下的时候才触发 -->
  <button @click="onCtrlClick">A</button>

  <!-- 添加按键修饰符让没有任何系统修饰符被按下的时候才触发 -->
  <button @click="onClick2">A</button>
</template>

# 题目分析

添加按键修饰符让即使 Alt 或 Shift 被一同按下时也会触发：表示其他按键按下的情况下，按Alt 和 Shift，都会被触发
- 例如我设置修饰符 ctrl + 点击，此时使用ctrl + shift 或者 ctrl + Alt 也会触发
添加按键修饰符让有且只有 Shift 被按下的时候才触发：表示只有shift被按下时，才会触发，如果有 ctrl + shift等同时按下不会触发
添加按键修饰符让没有任何系统修饰符被按下的时候才触发：如果按下了任何修饰符再点击，则不会生效，只且只有点击的时候才会生效

# 实现

<template>
  <!-- Add key modifiers made this will fire even if Alt or Shift is also pressed -->
  <button @click.ctrl="onClick1">A</button>

  <!-- Add key modifiers made this will only fire when Shift and no other keys are pressed -->
  <button @click.shift.exact="onCtrlClick">A</button>

  <!-- Add key modifiers made this will only fire when no system modifiers are pressed -->
  <button @click.exact="onClick2">A</button>
</template>

<script setup>
function onClick1() {
  console.log("onClick1");
}
function onCtrlClick() {
  console.log("onCtrlClick");
}
function onClick2() {
  console.log("onClick2");
}
</script>

# 解析

@click.ctrl：表示只有ctrl被按下时，才会触发，但是并不会限制其他按钮按下，只要保证ctrl被按下即可
@click.shift.exact：表示只有shift被按下时，才会触发，并且没有任何其他按钮被按下。exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。
@click.exact：表示没有任何系统修饰符被按下的时候，才会触发
- exact：确切的意思。可以理解为指定按键的组合，只有当组合按键被按下时，才会触发。当没有指定确定的修饰符的情况下就表示不需要修饰符才能触发

← 渲染函数[h()] 切换焦点→