美文网首页
Vue.config.keyCodes给 v-on 自定义键位别

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

作者: 戴眼镜的松鼠 | 来源:发表于2019-10-17 21:28 被阅读0次

先上官方api:(keyCodes-0)

keyCodes-0

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

keyCodes-1

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

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

keyCodes-2

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

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

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

keyCodes-3

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

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

相关文章

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

    先上官方api:(keyCodes-0) 没看过按键修饰符,刚开始看这段api可能有的小伙伴会一脸懵逼,希望小伙伴...

  • vue API

    一、全局配置 1. keyCodes给 v-on 自定义键位别名。用法: 二、全局API 1. Vue.exten...

  • vue-$emit

    绑定自定义事件 格式:在父组件组件中用v-on指令绑定一个自定义事件(代码如下:)注意:v-on:click、v-...

  • Vue学习笔记之三

    3. v-on按键修饰符 3.1 作用说明 3.2 案例: 3.3 可以自定义按键别名 3.4 自定义指令 在vu...

  • vue 2.0 知识点

    组件内部的v-on事件与组件上定义的v-on事件 当在组件内部的元素上定义了v-on事件,如:给button元素添...

  • 第二十节:Vue组件传参:Vue子组件向父组件传参(事件传参)

    1. 自定义事件 除了可以处理原生的DOM事件, v-on指令也可以处理组件内部触发的自定义的事件,调用this....

  • 学习vue2.0笔记(第四章下)

    js实现过渡:通过v-on事件## 实例:最外层index里面引入jq 监听三个事件 自定义事件## 自定义一个v...

  • Vue.js 自定义事件

    自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。指令 v-on 除了监听 DOM 事件外,还可以用...

  • 2019-01-31 vue组件基础篇2

    子组件 ═══>向父组件传递数据时,就要用到自定义事件v-on除了监听DOM事件外,还可以用于组件之间的自定义事件...

  • Vue-系统指令

    1. v-on v-on:click(@click) v-on:keydown(@keydown) v-on:ke...

网友评论

      本文标题:Vue.config.keyCodes给 v-on 自定义键位别

      本文链接:https://www.haomeiwen.com/subject/nqwdlctx.html