Vue中的键盘事件

1. 常用的按键别名

• 回车=> enter
• 删除=> delete (捕获"删除"和"退格"键)
• 退出=> esc
• 空格=> space
• 上=> up
• 下=> down
• 左=> left
• 右=> right

示例:

new Vue({
    el: "#root",
    data: {}, methods: {
        show(e){
            console.log(e.target.value);
        }
    }
});

<div id="root">
    <!--  回车触发事件  -->
    <input type="text" placeholder="回车触发事件" @keyup.enter="show">
    <!--    删除触发事件-->
    <input type="text" placeholder="删除触发事件" @keyup.delete="show">
    <!--    退出触发事件-->
    <input type="text" placeholder="退出触发事件" @keyup.esc="show">
</div>

2. Vue未提供别名的按键,可以使用按键原始的key值去绑定但主要要转换为kebab-case(短横线命名)

查询key值:

show(e){
    console.log(e.key);
}

示例:

<!--  CapsLock触发事件 CapsLock==>caps-lock -->
<input type="text" placeholder="CapsLock触发事件" @keyup.caps-lock="show">

3. 系统修饰键(用法特殊): ctrl, alt, shift, meta(Win键)

• 配合keyup使用: 按下修饰键的同时, 再按下其他键, 随后释放其他键,事件才被触发
• 配合keydown使用: 正常触发事件

<!--  Ctrl触发事件  -->
<input type="text" placeholder="CapsLock触发事件" @keydown.ctrl="show">
<!--  Alt触发事件  -->
<input type="text" placeholder="Alt触发事件" @keydown.alt="show">

4. 也可以使用keyCode去指定具体的按键(不推荐)

<!--    KeyCode触发事件 |  Enter键keyCode为13-->
<input type="text" placeholder="KeyCode触发事件" @keyup.13="show">

5. Vue.config.KeyCodes.自定义键名 = 键码, 可以去定制按键别名

Vue.config.keyCodes.huiche=13;

<!--    自定义别名为huiche触发事件-->
<input type="text" placeholder="自定义别名为huiche触发事件" @keyup.huiche="show">