登录  /  注册
博主信息
博文 128
粉丝 9
评论 5
访问量 231202
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
05-Vue_键盘修饰符
 一纸荒凉* Armani
原创
744人浏览过

按键修饰符

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

  1. <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
  2. <input v-on:keyup.enter="submit">

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

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

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

内置按键码

Vue 提供了绝大多数常用的按键码的别名

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

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

按键修饰符

自定义修饰符

  • 查看键盘事件对应的键码
  1. window.onkeyup = (e)=>{console.log(e.keyCode)}
  • 这样子也可以使用,但是不方便
  1. <input type="text" placeholder="按下F2" @keyup.113="total++" />
  • 自定义键盘修饰符的方式
  1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名:
  1. Vue.config.keyCodes.f2 = 113;
  1. 使用自定义的按键修饰符:
  1. <input type="text" v-model="name" @keyup.f2="total++">
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学