首页 > 其他 > 详细

vue -- 按键修饰符

时间:2019-04-04 19:50:46      阅读:106      评论:0      收藏:0      [点我收藏+]

在监听键盘事件时,我们经常需要查找常用按键对应的 code 值。Vue 可以在 v-on 上添加按键修饰符,用于监听按键事件
这里列出所有的按键修饰符别名:

.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右

记住所有 keyCode 是非常麻烦的事,所以 Vue 提供一些最常用按键的别名

<!-- 也可用于简写语法 -->
<input @keyup.enter="submit">

自定义按键修饰符别名

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

自动对应按键修饰符
也可以直接使用 KeyboardEvent.key 暴露出来的所有合法按键名作为修饰符,但是要将它们转换为串联式命名(kebab-case)

<input @keyup.page-down="onPageDown">

系统辅助按键
仅在以下修饰符对应的按键被按下时,才会触发鼠标或键盘事件监听器

.ctrl
.alt
.shift
.meta

例如:

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

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做一些操作</div>

vue -- 按键修饰符

原文:https://www.cnblogs.com/zjh-study/p/10656389.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!