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>
    • 那么,结果就是,我们输入idname,按下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 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!