Vue 按键修饰符快速指南 ⌨️

一、一句话理解

按键修饰符让你只监听特定的按键，而不是所有按键。

<!-- 监听所有按键 -->
<input @keyup="handleKey">

<!-- 只监听回车键 -->
<input @keyup.enter="handleEnter">

二、8个按键修饰符快速掌握

1. .enter- 回车键

用在哪：提交表单、发送消息

<input @keyup.enter="submit">  <!-- 按回车提交 -->

2. .tab- Tab键

用在哪：切换输入框焦点

<input @keyup.tab="nextField">  <!-- 按Tab切换到下一个 -->

3. .delete- 删除键

用在哪：删除内容

<input @keyup.delete="clearContent">  <!-- 按Delete清空 -->

4. .esc- ESC键

用在哪：关闭弹窗、撤销操作

<button @keyup.esc="closeModal">关闭</button>  <!-- 按ESC关闭 -->

5. .up- 上箭头

用在哪：向上导航、增加数值

<input @keyup.up="moveUp">  <!-- 按上箭头向上 -->

6. .down- 下箭头

用在哪：向下导航、减少数值

<input @keydown.down="moveDown">  <!-- 按下箭头向下 -->

7. .left- 左箭头

用在哪：向左移动

<input @keydown.left="moveLeft">  <!-- 按左箭头向左 -->

8. .right- 右箭头

用在哪：向右移动

<input @keydown.right="moveRight">  <!-- 按右箭头向右 -->

三、实际使用示例

<template>
  <div>
    <!-- 搜索框：回车搜索 -->
    <input 
      v-model="keyword"
      @keyup.enter="search"
      placeholder="输入后按回车搜索"
    >
    
    <!-- 表单：Tab切换，回车提交 -->
    <input v-model="username" @keyup.tab="log('到密码框')">
    <input v-model="password" @keyup.enter="login">
    
    <!-- 图片查看器：左右箭头切换 -->
    <div @keydown.left="prevImage" @keydown.right="nextImage">
      <img :src="currentImage">
    </div>
    
    <!-- 模态框：ESC关闭 -->
    <div v-if="showModal" @keyup.esc="closeModal">
      按ESC关闭
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      username: '',
      password: '',
      showModal: false
    }
  },
  methods: {
    search() {
      console.log('搜索:', this.keyword)
    },
    login() {
      console.log('登录')
    },
    prevImage() {
      console.log('上一张')
    },
    nextImage() {
      console.log('下一张')
    },
    closeModal() {
      this.showModal = false
    },
    log(msg) {
      console.log(msg)
    }
  }
}
</script>

四、组合使用

1. 多个修饰符一起用

<!-- 组合使用 -->
<input @keyup.ctrl.enter="quickSubmit">  <!-- Ctrl+回车提交 -->
<input @keyup.ctrl.a="selectAll">        <!-- Ctrl+A全选 -->

2. 常用组合

<!-- 表单常用 -->
<input @keyup.enter="submit" @keyup.esc="cancel">

<!-- 导航常用 -->
<div @keyup.up="up" @keydown.down="down" 
     @keydown.left="left" @keydown.right="right">
  用方向键控制
</div>

五、快速记忆表格

六、记忆口诀

回车提交表单，Tab切换焦点
Delete删内容，ESC关弹窗
上下能导航，左右可切换

一句话总结

按键修饰符让你准确控制：哪个键，做什么事。