vueJS 015 监听键盘事件修饰键

最新推荐文章于 2023-10-06 17:29:30 发布

原创最新推荐文章于 2023-10-06 17:29:30 发布 · 297 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

vue.js

20 篇文章

订阅专栏

本文介绍了VueJS中监听键盘事件的方法，包括监听Enter事件、使用键盘按键别名、自定义按键别名、系统修饰键的区别以及exact修饰符的运用。详细讲解了如何通过v-on指令结合keyup事件与各种修饰键实现精确的键盘操作控制。

文章目录

参考文档

vue 监听键盘事件API
MDN KeyboardEvent.key 键盘按键别名大全

监听Enter事件

vue 案例：

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

KeyboardEvent.key 键盘按键别名中的别名都可以直接这样使用：
v-on:keyup.键盘按键别名

vue提供的按键别名具有兼容性

自定义按键别名

vue 自定义API
通过全局 config.keyCodes 对象自定义按键修饰符别名

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

系统修饰键

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

exact 修饰符

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/vue2.6.11.js"></script>
    <style type="text/css">
        button{
            height: 50px;
        }
    </style>
</head>
<body >
<div id="app">
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button @click.ctrl="click2">即使 Alt 或 Shift 被一同按下时也会触发</button>

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

    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button @click.exact="click3">没有任何系统修饰符被按下的时候才触发</button>
</div>
<script>

    let vm = new Vue({
        el: '#app',
        methods:{
            click2(){
                console.info("即使 Alt 或 Shift 被一同按下时也会触发");
            },
            onCtrlClick(){
                console.info("有且只有 Ctrl 被按下的时候才触发");
            },
            click3(){
                console.info("没有任何系统修饰符被按下的时候才触发");
            }
        }
    });


</script>
</body>
</html>

鼠标按钮修饰符

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

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/vue2.6.11.js"></script>
    <style type="text/css">
        button{
            height: 50px;
        }
    </style>
</head>
<body >
<div id="app">
    <button @click.left="click2">(左)信天翁 即将灭亡</button>
    <button @click.middle="click2">(中)信天翁 即将灭亡</button>
    <button @click.right="click2">(右)信天翁 即将灭亡</button>
</div>
<script>

    let vm = new Vue({
        el: '#app',
        methods:{
            click2(){
                console.info("秃鹫即将灭亡");
            }
        }
    });


</script>
</body>
</html>