和阿牛一起冲Vue

文章目录


前言

青春，因为奋斗与奉献更美丽。

键盘事件

通过获取键盘敲入的按钮，来实现某些需求

两种方式

通过键盘修饰符

<input type="text" placeholder="按下回车提示输入完成" @keyup.enter="showInfo">

======================================================================
 methods: {
            showInfo(Event) {
                // if (Event.keyCode !== 13) {
                //     return
                // }
                console.log(Event.target.value);
            }
        }

通过Event事件

methods: {
            showInfo(Event) {
                if (Event.keyCode !== 13) {
                    return
                }
                console.log(Event.target.value);
            }
        }

总结

1.Vue中常用的按键别名：

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

  • (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
  • (2).配合keydown使用：正常触发事件。

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

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

<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">

Vue.config.keyCodes.huiche = 13