Vue.config.keyCodes给 v-on 自定义键位别名

先上官方api:(keyCodes-0)

Vue.config.keyCodes给 v-on 自定义键位别名_第1张图片
keyCodes-0

没看过按键修饰符,刚开始看这段api可能有的小伙伴会一脸懵逼,希望小伙伴先去看下这官方教程。简单解释下: key值不能使用驼峰,而要使用中划线方式,mediaPlayPause换成media-play-pause。key: media-play-pause, value: 179(键盘对应unicode码),179对应如下keyCodes-1,其他码表自行查找。当你抬起停止按键时,会触发method方法。

Vue.config.keyCodes给 v-on 自定义键位别名_第2张图片
keyCodes-1

接下来看下源码怎么实现的,

看下config.js文件如下keyCodes-2

Vue.config.keyCodes给 v-on 自定义键位别名_第3张图片
keyCodes-2

$flow-disable-line: 不解释,感兴趣的朋友可以去看下flow.js,配置在源码.flowconfig文件下。

Custom user key aliases for v-on:自定义unicode码别名。

先来看下/core/instance/proxy.js文件,有这么一段keyCodes-3:

Vue.config.keyCodes给 v-on 自定义键位别名_第4张图片
keyCodes-3

这句话是说:定义的别名不能是这stop,prevent,self,ctrl,shift,alt,meta,exact几个,这几个vue默认的。

其实keyCodes的相关api看到这就可以了。因为接下来就是把keyCode绑定到事件上面,会在事件修饰符里面看到。

你可能感兴趣的