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

先上官方api:(keyCodes-0)
Vue.config.keyCodes给|Vue.config.keyCodes给 v-on 自定义键位别名
文章图片
keyCodes-0 没看过按键修饰符,刚开始看这段api可能有的小伙伴会一脸懵逼,希望小伙伴先去看下这官方教程。简单解释下: key值不能使用驼峰,而要使用中划线方式,mediaPlayPause换成media-play-pause。key: media-play-pause, value: 179(键盘对应unicode码),179对应如下keyCodes-1,其他码表自行查找。当你抬起停止按键时,会触发method方法。
Vue.config.keyCodes给|Vue.config.keyCodes给 v-on 自定义键位别名
文章图片
keyCodes-1 接下来看下源码怎么实现的,
看下config.js文件如下keyCodes-2
Vue.config.keyCodes给|Vue.config.keyCodes给 v-on 自定义键位别名
文章图片
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给|Vue.config.keyCodes给 v-on 自定义键位别名
文章图片
keyCodes-3 这句话是说:定义的别名不能是这stop,prevent,self,ctrl,shift,alt,meta,exact几个,这几个vue默认的。
【Vue.config.keyCodes给|Vue.config.keyCodes给 v-on 自定义键位别名】其实keyCodes的相关api看到这就可以了。因为接下来就是把keyCode绑定到事件上面,会在事件修饰符里面看到。

    推荐阅读