Vue自定义 按键修饰符

2018-12-29  本文已影响0人  筱疯子

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!--敲击 回车实现 add 事件 -->
<input type="text" name="" id="" value="" class="form-control" v-model="name" @keyup.enter="add"/>
全部的按键别名:

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

如果如果想直接调用 @keyup.f2 = "add" ,需要自定义全局按键
解决方案如下:键盘对应的键码链接 (https://blog.csdn.net/weixin_42218847/article/details/81411291)

//自定义全局按键修饰符
Vue.config.keyCodes.F2 = 113

<!-- 自定义按键修饰  按  f2 添加 -->
<input type="text" name="" id="" value="" class="form-control" v-model="name" @keyup.113="add"/> 
上一篇下一篇

猜你喜欢

热点阅读