11键盘事件

键盘事件

    - @keyup
    - @keydown

    1.vue中的按键别名
        - 回车 .enter
        - 删除 .delete    (捕获 “删除” 和 “退格” 键 )
        - 退出 .esc
        - 空格 .space
        - 换行 .tab (配合 “keydown”使用，原因是tab本身就是切换聚焦 )
        - 上 .up
        - 下 .down
        - 左 .left
        - 右 .right

    - 组合按键：
        ps： ctrl + a -> @keyup.ctrl.a

    2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)

    3.系统修饰键（用法特殊）:ctr1、alt、 shift、meta
        (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键,事件才被触发
        (2).配合keydown使用:正常触发事件。

    4.也可以使用keyCode去指定具体的按键（不推荐)

    5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名

<body>
    <div id="view">
        <input type="text" placeholder="请输入..." @keyup.ctrl.c="KeyEvent">
    </div>
<script>
    new Vue({
        el:'#view',
        methods:{
            KeyEvent(e){
                console.log('@e.target.value:',e.target.value)
            },
        }
    })
</script>
</body>
posted @ 2022-09-06 16:02  Redskaber  阅读(42)  评论(0)    收藏  举报