键盘事件

keyup注意点

在 keyup 中使用按键修饰符时必须配合使用字母、符号键，即单单使用功能键（ctrl 、alt 等）是没有效果的

<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">

<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

如果在 element-plus 的 input 中使用 keyup 时必须结合 .native，因为 element-plus 对其进行了封装

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

自定义按键修饰符

自定义按键修饰符别名 是将按键码自定义名称，就可以在绑定按键事件时用到了

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

案例

<!-- 只有在 `key` 是 `Enter` 时调用 `submit()` -->
<input v-on:keyup.enter="submit">
<!-- 同样的，使用其他按键名称 -->
<input v-on:keyup.page-down="onPageDown">

.exact精确修饰符

准确的讲 .exact 提供了兼容触发的功能，即不受其他功能键的影响，例如

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

监听全局

mounted() {
    document.onkeydown = function (event) {
        let key = window.event.keyCode;
        if (key === 65 && event.ctrlKey) { 
            // 监听ctrl+A组合键            
            window.event.preventDefault(); //关闭浏览器默认快捷键            
            console.log('crtl+ a组合键')        
        } else if(key === 83 && event.ctrlKey) {             
            window.event.preventDefault(); //关闭浏览器快捷键
            console.log('保存');
        }
    }
}

参照键盘 keycode