• 按键修饰符
    • 按键码

    按键修饰符

    在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

    1. <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    2. <input v-on:keyup.enter="submit">

    你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

    1. <input v-on:keyup.page-down="onPageDown">

    在上述示例中,处理函数只会在 $event.key 等于 PageDown 时被调用。

    按键码

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

    使用 keyCode 特性也是允许的:

    <input v-on:keyup.13="submit">

    为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9,这些内置的别名应该是首选。

    你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112