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

 更新时间:2021年01月29日 11:09:00   作者:胡九筒  
这篇文章主要介绍了vue监听键盘事件的相关总结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

按键修饰符

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

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

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

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

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

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

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

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

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 

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

Do something
与按键别名不同的是,修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放其他的按键;单单释放 ctrl 不会引发事件。

<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other"><!-- 按下Ctrl + enter时触发 --><input @keydown.ctrl.13="submit">

对于elementUI的input,我们需要在后面加上.native, 因为elementUI对input进行了封装,原生的事件不起作用。

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

.exact修饰符

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

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

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

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

鼠标按钮修饰符

  • .left 
  • .right 
  • .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。 

系统按键组合

如果我们要监听全局的按键操作方法,显然,将其绑定在页面元素上是不行的。

我们可在mounted里面监听:

mounted() {
  document.onkeydown = function (event) {
    let key = window.event.keyCode;
    if (key === 65 && event.ctrlKey) { 
      // 监听ctrl+A组合键      
      window.event.preventDefault(); //关闭浏览器默认快捷键      
      console.log('crtl+ a组合键')    
    } else if(key === 83 && event.ctrlKey) {       
      window.event.preventDefault(); //关闭浏览器快捷键
      console.log('保存');
    }
  }
}

从以上例子可以看出,shift、Control、Alt 在JS中也可用“window.event.shiftKey”、“window.event.ctrlKey”、“window.event.altKey” 代替。

附录-键盘按钮keyCode表

以上就是vue监听键盘事件的相关总结的详细内容,更多关于vue监听键盘事件的资料请关注脚本之家其它相关文章!

相关文章

  • Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 是一个全新的 Vue 项目脚手架。这篇文章主要介绍了Vue-cli@3.0 插件系统简析,需要的朋友可以参考下
    2018-09-09
  • vue3 Composition API使用示例教程

    vue3 Composition API使用示例教程

    Vue3新增了Composition API,我们只需将实现某一功能的相关代码全部放进一个函数中,然后return需要对外暴露的对象,这篇文章主要介绍了vue3 Composition API使用,需要的朋友可以参考下
    2022-12-12
  • 基于前端VUE+ElementUI实现table行上移或下移功能(支持跨页移动)

    基于前端VUE+ElementUI实现table行上移或下移功能(支持跨页移动)

    有时候需要前端实现上移和下移功能,下面这篇文章主要给大家介绍了关于如何基于前端VUE+ElementUI实现table行上移或下移(支持跨页移动)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue函数@click.prevent的使用解析

    vue函数@click.prevent的使用解析

    这篇文章主要介绍了vue函数@click.prevent的使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 基于Vue实现我的钱包充值功能的示例代码

    基于Vue实现我的钱包充值功能的示例代码

    这篇文章主要为大家详细介绍了如何基于Vue实现我的钱包充值功能,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考一下
    2024-01-01
  • 详解VueJs前后端分离跨域问题

    详解VueJs前后端分离跨域问题

    本篇文章主要介绍了详解VueJs前后端分离跨域问题,详细介绍了在项目内设置代理(proxyTable)的方式来解决跨域问题,有兴趣的可以了解一下
    2017-05-05
  • Vue自定义指令实现按钮级的权限控制的示例代码

    Vue自定义指令实现按钮级的权限控制的示例代码

    在Vue中可以通过自定义指令来实现按钮权限控制,本文主要介绍了Vue自定义指令实现按钮级的权限控制的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-05-05
  • vue同一浏览器登录多账号处理方案

    vue同一浏览器登录多账号处理方案

    项目在线上会遇到管理员类似权限比较大的用户,会在同一浏览器登陆多个账号,遇到这样的问题如何处理呢,下面小编给大家介绍vue同一浏览器登录多账号处理方法,感兴趣的朋友一起看看吧
    2024-01-01
  • preload对比prefetch的功能区别详解

    preload对比prefetch的功能区别详解

    这篇文章主要为大家介绍了preload对比prefetch的使用区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • vue实现静态页面点赞和取消点赞功能

    vue实现静态页面点赞和取消点赞功能

    这篇文章主要为大家详细介绍了vue实现静态页面点赞和取消点赞的功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论