Vue - 按键修饰符 && 系统修饰符

本文简述了Vue中的按键修饰符

引入样例

1. 在生活中，常常有这样的场景：按下Enter提交，或者按下Esc退出全屏等等，这些都是与键盘有关的操作
2. 同理，我们在Vue中，也可以通过在v-on添加按键修饰符将某个按键映射到对应的事件上，用于监听按键事件
3. 举栗引入：

   <div id="app">
       序号：<input type="text" v-model="idValue" />
       车名：<input type="text" v-model="nameValue" @keyup.enter="add">
       <p v-for="item in list">
           序号：{{item.id}}  车名：{{item.name}}
       </p>
   </div>
   <script type="text/javascript">
       var app = new Vue({
           el: '#app',
           data: {
               idValue: '',
               nameValue: '',
               list: [
                   {id:1,name:'奥迪'},
                   {id:2,name:'奔驰'},
               ]
           },
           methods: {
               add(){
                   this.list.unshift({
                       id: this.idValue,
                       name : this.nameValue
                   })
               }
           }
       })
   </script>

   • 那么，结果就是，我们输入id与name，按下Enter，即可将输入的内容添加到list中并通过v-for显示出来
4. 我们详细分析一下刚才的流程：
   • 我们在第二个<input>框里面添加了keyup事件，即键盘按下抬起时触发
   • 后面的.enter即为按键修饰符，定义哪个按键会触发该事件（这里是回车触发）
   • 触发的事件反映在add()方法上，即回车就触发add()方法

按键修饰符别名

1. 其实，除了.enter以外，Vue还定义了许多按键修饰符，列举如下：
   • .enter 回车键
   • .tab tab键
   • .delete 删除（或退格）键
   • .esc Esc键
   • .space 空格键
   • .up ↑键
   • down ↓键
   • left ←键
   • right →键
2. 其实，你还可以通过全局config.keyCodes对象，来实现：自定义键盘修饰符别名
3. 注：不管是使用键盘名称还是使用键盘码都要防止快捷键的冲突，快捷键冲突的时候会不起作用。

关于按键码

1. 在之前，我们不仅可以使用按键修饰符别名，还可以使用按键码来作为修饰符使用：
   • 比如f2的按键码为113，那么我们可以通过@keyup.113="..."来使用该按键修饰符
2. 但是在官方文档中，已经明确提到：

   keyCode的事件用法已经被废弃了并可能不会被最新的浏览器支持

3. 所以，建议的是使用按键修饰符别名...

系统修饰符

1. 仅在按下相应按键时才触发鼠标或键盘事件的监听器，简单地说就是，配合其他按键才能使用
2. 其修饰符有：
   • .ctrl
   • .alt
   • .shift
   • .meta

3. 例如：

   <!-- Alt + C -->
   <input @keyup.alt.67="clear">
   
   <!-- Ctrl + Click -->
   <div @click.ctrl="...">...</div>

4. .exact修饰符
   • .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件

     <!--  Alt 或 Shift 被一同按下时也会触发 -->
     <button @click.ctrl="onClick">A</button>
     <!-- 有且只有 Ctrl 被按下的时候才触发 -->
     <button @click.ctrl.exact="onCtrlClick">A</button>
     <!-- 没有任何系统修饰符被按下的时候才触发 -->
     <button @click.exact="onClick">A</button>

本作品采用《CC 协议》，转载必须注明作者和本文链接