前面一直都是用click事件 进行触发的, 有一种特殊的场景,比如客户想点击enter键 ,进行添加商品记录, 或者 他点击enter 进行search 记录 这个就用到了 按键修饰符, 有几个特殊的键直接可以用,如果特别难记住的,就需要自己定义。
下边添加 enter触发, 全部的代码的链接 为 代码链接,用最下边一个
<input type="text" v-model="name" class="form-control" @keyup.enter="add">
解释下:
@keyup.enter 的意思是 当在name 的栏位里 抬起光标并输入enter 触发add方法。
除了enter 定义好的还有以下 :
如果我们想用其他的键代替 ,该如何做呢, 就需要自己定义了 ,
在定义之前要了解下, js中
js中键盘按键对应的键值
想用哪个需要找对应的值, 并且查到的 keycode 如下:
keycode 121 = F10
我们是直接可以用的 如下:
<input type="text" v-model="name" class="form-control" @keyup.121="add">
也能满足替换的,
<input type="text" v-model="name" class="form-control" @keyup.121="add">
优点是 好用, 但是可读性太差,其他人看这个还得去查keycode, 我们可以给这个不好记的keycode 添加一个重命名,这样大家都好理解 如下:
Vue.config.keyCodes.f10 =121
把 121 转为为 f10, 用的时候直接用f10 就行了, f10这个名字你可以随便起,一般都是 起和键盘对应的。
<input type="text" v-model="name" class="form-control" @keyup.f10="add">