按键修饰符

在 Vue 3 中，按键修饰符用于监听键盘事件，并根据特定的按键来触发相应的事件处理函数。这些修饰符通常与键盘事件一起使用，如 @keydown、@keyup 、@click等。下表列出了 Vue 3 中可用的一些常见按键修饰符：

常用的按键修饰符

按键修饰符	描述
.enter	当按下 Enter 键时触发
.tab	当按下 Tab 键时触发
.delete	当按下 Delete 或 Backspace 键时触发
.esc	当按下 Esc 键时触发
.space	当按下空格键时触发
.up	当按下向上箭头键时触发
.down	当按下向下箭头键时触发
.left	当按下向左箭头键时触发
.right	当按下向右箭头键时触发
.ctrl	当 Ctrl 键被按下时触发
.alt	当 Alt 键被按下时触发
.shift	当 Shift 键被按下时触发
.meta	当 Meta 键 (在 Mac 上是 Command 键，在 Windows 上是 Windows 键) 被按下时触发
.exact	允许控制触发事件所需的确切组合键

这些修饰符可以单独使用，也可以组合使用，为你在处理键盘事件时提供更多的灵活性和控制能力。例如，如果你想要在用户按下 Shift + Enter 键时提交表单，可以这样写：

@keydown.shift.enter 和 @keydown.shift.enter.exact 的差异

这些修饰符可以单独使用，也可以组合使用，为你在处理键盘事件时提供更多的灵活性和控制能力。例如，如果你想要在用户按下 Shift + Enter 键时提交表单，可以这样写：

<form @keydown.shift.enter="submitForm">
  <!-- 表单内容 -->
</form>

<form @keydown.shift.enter.exact="submitForm">
  <!-- 表单内容 -->
</form>

@keydown.shift.enter

当你使用 @keydown.shift.enter，你指定了一个事件监听器，它将只在用户同时按下 Shift 键和 Enter 键时触发。这意味着如果用户只按下了 Enter 键，或者按下了 Enter 键和其他任何修饰键（除 Shift），事件不会触发。

@keydown.shift.enter.exact

添加 .exact 修饰符（@keydown.shift.enter.exact）后，你进一步指定了这个事件监听器只会在用户仅仅按下 Shift 键和 Enter 键时触发。这意味着，如果用户在按下 Shift + Enter 的同时还按下了任何其他修饰键（如 Ctrl、Alt 或 Meta），那么事件不会触发。

区别

• 没有.exact修饰符：只要 Shift 和 Enter 被按下，不管是否有其他修饰键同时被按下，事件都会触发。

• 有.exact修饰符：仅当只有 Shift 和 Enter 被按下，没有其他任何修饰键（如 Ctrl、Alt 或 Meta）同时被按下，事件才会触发。