• 售前

  • 售后

热门帖子
入门百科

vue监听键盘事件的相干总结

[复制链接]
匣中剑他娘官 显示全部楼层 发表于 2021-10-25 20:08:17 |阅读模式 打印 上一主题 下一主题
按键修饰符


在监听键盘变乱时,我们经常须要查抄详细的按键。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">
复制代码
为了在须要的环境下支持旧欣赏器,Vue 提供了绝大多数常用的按键码的别名:
      
  • - enter   
  • - tab   
  • - delete (捕获“删除”和“退格”键)   
  • - esc   
  • - space   
  • - up   
  • - down   
  • - left   
  • - right
你还可以通过全局 config.keyCodes 对象自界说按键修饰符别名:
  1. // 可以使用 `v-on:keyup.f1`
  2. Vue.config.keyCodes.f1 = 112
复制代码
体系修饰键


可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘变乱的监听器。
      
  • - .ctrl   
  • - .alt   
  • - .shift   
  • - .meta
Do something
与按键别名差异的是,修饰键和 keyup 变乱一起用时,变乱引发时必须按下正常的按键。换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放其他的按键;单单释放 ctrl 不会引发变乱。
  1. <!-- 按下Alt + 释放C触发 -->
  2. <input @keyup.alt.67="clear">
  3. <!-- 按下Alt + 释放任意键触发 -->
  4. <input @keyup.alt="other"><!-- 按下Ctrl + enter时触发 --><input @keydown.ctrl.13="submit">
复制代码
对于elementUI的input,我们须要在后面加上.native, 因为elementUI对input举行了封装,原生的变乱不起作用。
  1. <input v-model="form.name" placeholder="昵称" @keyup.enter="submit">
  2. <el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>
复制代码
.exact修饰符


.exact 修饰符允许你控制由准确的体系修饰符组合触发的变乱。
  1. <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  2. <button v-on:click.ctrl="onClick">A</button>
  3. <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  4. <button v-on:click.ctrl.exact="onCtrlClick">A</button>
  5. <!-- 没有任何系统修饰符被按下的时候才触发 -->
  6. <button v-on:click.exact="onClick">A</button>
复制代码
鼠标按钮修饰符


      
  • .left   
  • .right   
  • .middle
这些修饰符会限制处理函数仅相应特定的鼠标按钮。
体系按键组合


如果我们要监听全局的按键操纵方法,显然,将其绑定在页面元素上是不行的。
我们可在mounted内里监听:
  1. mounted() {
  2.   document.onkeydown = function (event) {
  3.     let key = window.event.keyCode;
  4.     if (key === 65 && event.ctrlKey) {
  5.       // 监听ctrl+A组合键      
  6.       window.event.preventDefault(); //关闭浏览器默认快捷键      
  7.       console.log('crtl+ a组合键')   
  8.     } else if(key === 83 && event.ctrlKey) {      
  9.       window.event.preventDefault(); //关闭浏览器快捷键
  10.       console.log('保存');
  11.     }
  12.   }
  13. }
复制代码
从以上例子可以看出,shift、Control、Alt 在JS中也可用“window.event.shiftKey”、“window.event.ctrlKey”、“window.event.altKey” 代替。
附录-键盘按钮keyCode表



以上就是vue监听键盘变乱的相干总结的详细内容,更多关于vue监听键盘变乱的资料请关注草根技术分享其它相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作