vue如何自定义全局/私有按键修饰符、过滤器和指令

一、vue中自定义全局按键修饰符？

前面学习了事件修饰符，那么什么是按键修饰符？

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">

只有在键盘按键按 Enter（回车）键时，才会触发调用 submit() 方法。

你也可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符：

<input v-on:keyup.page-down="onPageDown">

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

 

接下来了解一下 按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的：

<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

 有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

如果上面的常用按键都不是想要的，如果想要自定义按键修饰符别名怎么办呢？

此处 113 是 f2 按键对应的键码值

// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113

使用的时候：

<input type="text" v-model="name" @keyup.f2="add">

常见键盘按键对应键码值大全可以参考这个链接：https://www.cnblogs.com/wuhua1/p/6686237.html

---

1.x中自定义键盘修饰符【了解即可】

Vue.directive('on').keyCodes.f2 = 113;

2.x中自定义键盘修饰符

•  通过`Vue.config.key