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

前面一直都是用click事件 进行触发的, 有一种特殊的场景,比如客户想点击enter键 ,进行添加商品记录, 或者 他点击enter 进行search 记录 这个就用到了 按键修饰符, 有几个特殊的键直接可以用,如果特别难记住的,就需要自己定义。

下边添加 enter触发, 全部的代码的链接 为 代码链接,用最下边一个

 

解释下:
@keyup.enter 的意思是 当在name 的栏位里 抬起光标并输入enter 触发add方法。

除了enter 定义好的还有以下 :

前端应用_Vue_自定义按键修饰符_实现点击enter键 进行提交和自定义按键修饰符_第1张图片
如果我们想用其他的键代替 ,该如何做呢, 就需要自己定义了 ,

在定义之前要了解下, js中
js中键盘按键对应的键值
想用哪个需要找对应的值, 并且查到的 keycode 如下:
keycode 121 = F10

我们是直接可以用的 如下:


也能满足替换的,

        

优点是 好用, 但是可读性太差,其他人看这个还得去查keycode, 我们可以给这个不好记的keycode 添加一个重命名,这样大家都好理解 如下:

  Vue.config.keyCodes.f10 =121

把 121 转为为 f10, 用的时候直接用f10 就行了, f10这个名字你可以随便起,一般都是 起和键盘对应的。

        

你可能感兴趣的:(Vue.js)