zoukankan      html  css  js  c++  java
  • 按键修饰符

    按键修饰符

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

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

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

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

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

    按键码

    keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

    使用 keyCode attribute 也是允许的:

    <input v-on:keyup.13="submit">
    

    为了在必要的情况下支持旧浏览器,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
    

    系统修饰键

    2.1.0 新增

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

    • .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 v-on:keyup.alt.67="clear">
    
    <!-- Ctrl + Click -->
    <div v-on:click.ctrl="doSomething">Do something</div>
    

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

    .exact 修饰符

    2.5.0 新增

    .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>
    

    鼠标按钮修饰符

    2.2.0 新增

    • .left
    • .right
    • .middle

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

  • 相关阅读:
    已解决:No 'Access-Control-Allow-Origin'跨域问题
    (转 )聊聊GIS中的坐标系|再版
    CentOs如何挂载硬盘(手把手教你 )
    CentOS如何挂载硬盘
    CentOS7 复制文件夹和移动文件夹
    centos中怎么查看一个文件的创建时间
    vue项目报错Trailing spaces not allowed.
    (转)Vue框架Element UI教程-安装环境搭建(一)
    windows 根据端口查看进行PID 并杀掉进程
    完美解决CentOS8 yum安装AppStream报错,更新yum后无法makecache的问题
  • 原文地址:https://www.cnblogs.com/junlinsky/p/12897806.html
Copyright © 2011-2022 走看看