Vue_按键修饰符

目录

• 常用的按键码的别名
• 系统修饰键
• .exact修饰符
• 鼠标按钮修饰符
• 总结

---

Vue中文文档_按键修饰符

常用的按键码的别名

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

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

##自定义按键修饰符 - 你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系统修饰键

• .ctrl
• .alt
• .shift
• .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

• .left
• .right
• .middle

总结

• 通过代码 @keyup.enter 之类的代码可以完成对键盘事件的事件处理。
• 通过代码 config.keyCodes自定义按键修饰符别名（注意自定义的是按键修饰符的别名而不是键码，键码是固定不变的例如enter对应13，f2对应113，但是可以对键码添加名称用于调用）

Vue.config.keyCodes.f2=113;
//对113键码（对应f2按键）添加别名f2，这样就可以直接调用f2而不是通过键码才能调用
//@keyup.f2在不设置之前是无效的。
@keyup.f2="doSomething";
//在按下f2时触发对应的事件处理函数

• 通过代码 @keyup.alt.113 可以为键盘事件"同时按下'alt'+'f2'键"添加事件处理程序
• 通过代码 @click.ctrl可以为事件"鼠标左键+ctrl"添加事件处理程序（此时如果ctrl和其它按键一同按下也会触发，因此并不严谨）