前端应用_Vue_自定义按键修饰符_实现点击enter键 进行提交和自定义按键修饰符

前面一直都是用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">