Vue学习日记之自定义按键修饰符

1、Vue中的按键修饰符

在Vue中存在着修饰符，而按键修饰符又是其中的一种，在Vue的官方文档中有9种按键修饰符。

• .enter----回车按下
• .tab----tab键按下
• .delete (捕获“删除”和“退格”键)
• .esc-----ESC键按下
• .space---空格键按下
• .up------上
• .down----下
• .left----左
• .right---右

举个例子：

  <div id="app" >
 <input style="width: 200px" type="text" :value="msg" @keyup.enter="add">
  </div>
<script>
   Vue.filter("msgFormat",function (msg) {
       return msg+"，公有过滤器"
   });
   var vm=new Vue({
       el:"#app",
       data:{
           msg:"点击后，按下回车"
       },
       methods:{
       add:function () {
           this.msg="改变了，按键修饰符起作用了"
       }
       }
   })
</script>

运行效果：

点击输入框，按下回车键以后

我们定义了一个事件keyup，使它绑定到了一个函数add，用于改变msg的内容，我们还加上了一个.enter的按键修饰符，当回车键按下时，触发add事件

2、Vue中的自定义键盘修饰符

  在Vue中只定义了9种按键修饰符，如果我们还想要其他的，比如F4键呢？那怎么办？最好的办法就是自定义按键修饰符。

  我们知道在JS事件种每一个键盘都对应的一种键盘码，如enter对应的键盘码为13。

  那我们要自定义键盘修饰符就需要知道想要实现的键盘对应的键盘码，我们可以从这个连接中去找https://www.cnblogs.com/wuhua1/p/6686237.html  

如我们要想实现F4的键盘修饰符，那么我们除了知道F4的键盘码为115，还要在全局域中添加

Vue.config.keyCodes.f4=115。

  <div id="app" >
 <input style="width: 200px" type="text" :value="msg" @keyup.f4="add">
  </div>
<script>
   Vue.config.keyCodes.f4=115;
   Vue.filter("msgFormat",function (msg) {
       return msg+"，公有过滤器"
   });
   var vm=new Vue({
       el:"#app",
       data:{
           msg:"点击后，按下f4"
       },
       methods:{
       add:function () {
           this.msg="改变了，按键修饰符起作用了"
       }
       }
   })
</script>

运行结果：

按下f4之后

自定义按键修饰符需要    ①键的键盘码          ②Vue.config.keyCodes.键名=键盘码