feat(question): add Key Modifiers (#233)

* feat(question): add Key Modifiers

Co-authored-by: webfansplz <308241863@qq.com>

Author: github-actions[bot]

questions/232-key-modifiers/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <!-- Add key modifiers made this will fire even if Alt or Shift is also pressed -->
+<button @click="onClick1">A</button>
+
+<!-- Add key modifiers made this will only fire when Shift and no other keys are pressed -->
+<button @click="onCtrlClick">A</button>
+
+<!-- Add key modifiers made this will only fire when no system modifiers are pressed -->
+<button @click="onClick2">A</button>
+</template>
+
+<script setup>
+  function onClick1(){
+    console.log('onClick1')
+  }
+  function onCtrlClick(){
+    console.log('onCtrlClick')
+  }
+  function onClick2(){
+    console.log('onClick2')
+  }
+</script>

questions/232-key-modifiers/README.md

@@ -0,0 +1,29 @@
+<!--info-header-start-->
+<!--info-header-end-->
+
+
+When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for v-on or @ when listening for key events,e.g. :
+
+```vue
+<!-- only call `vm.submit()` when the `key` is `Enter` -->
+<input @keyup.enter="submit" />
+```
+
+For this challenges,we'll try something about it,let's go :
+
+```vue
+<template>
+  <!-- Add key modifiers made this will fire even if Alt or Shift is also pressed -->
+<button @click="onClick1">A</button>
+
+<!-- Add key modifiers made this will only fire when Shift and no other keys are pressed -->
+<button @click="onCtrlClick">A</button>
+
+<!-- Add key modifiers made this will only fire when no system modifiers are pressed -->
+<button @click="onClick2">A</button>
+</template>
+```
+
+
+<!--info-footer-start-->
+<!--info-footer-end-->

questions/232-key-modifiers/README.zh-CN.md

@@ -0,0 +1,30 @@
+<!--info-header-start-->
+<!--info-header-end-->
+
+
+在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符：，例如：
+
+``vue
+<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
+<input @keyup.enter="submit" />
+````````
+
+在这个挑战中，我们将尝试它，让我们开始吧：
+
+```vue
+<template>
+  <!-- 添加按键修饰符让即使 Alt 或 Shift 被一同按下时也会触发 -->
+<button @click="onClick1">A</button>
+
+<!-- 添加按键修饰符让有且只有 Shift 被按下的时候才触发 -->
+<button @click="onCtrlClick">A</button>
+
+<!-- 添加按键修饰符让没有任何系统修饰符被按下的时候才触发 -->
+<button @click="onClick2">A</button>
+</template>
+
+```
+
+
+<!--info-footer-start-->
+<!--info-footer-end-->

questions/232-key-modifiers/info.yml

@@ -0,0 +1,7 @@
+difficulty: medium
+title: Key Modifiers
+tags: Event Handling
+author:
+  github: webfansplz
+  name: webfansplz
+

questions/232-key-modifiers/info.zh-CN.yml

@@ -0,0 +1,7 @@
+difficulty: medium
+title: 按键修饰符
+tags: Event Handling
+author:
+  github: webfansplz
+  name: webfansplz
+