vue键盘事件

原创于 2023-03-30 10:38:48 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在Vue中，可以使用预定义的按键别名如enter、delete、esc等来处理键盘事件。对于没有别名的键，可以使用key值并转换为kebab-case。系统修饰键如ctrl、alt、shift、meta需要特别处理，常与keyup或keydown配合使用。此外，可以通过Vue.config.keyCodes自定义按键别名。

键盘事件

Vue中常用的按键别名：

回车 => enter

删除 => delete(捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab(必须配合keydown使用)

上 => up

下 => down

左 => left

右 => right
Vue未提供别名的按键，可以使用原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）: ctrl 、alt、shift、meta(win)

（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

（2）配合keydown使用：正常触发事件
也可以使用keyCode去指定具体的按键
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名