【11】vue.js — 自定义键盘事件

最新推荐文章于 2024-07-16 15:39:11 发布

原创最新推荐文章于 2024-07-16 15:39:11 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue自定义键盘事件 #自定义键盘事件

本文介绍了如何在Vue中使用默认的键盘事件，并演示了如何通过自定义方式实现特定按键的功能，如使用@keydown.ctrl来监听Ctrl键的按下。

vue提供了一些键盘事件我们可以直接向下面这样来使用，@keydown.c表示按下c时触发，@keydown.17表示按下CTRL时触发。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <input type="text" @keydown.c="show"/>
            <!-- CTRL键的keyCode值：17 -->
            <input type="text" @keydown.17="show"/>
        </div>
    </body>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el: '#box',
                data: {
                    a: 'blue'
                },
                methods: {
                    show: function(){
                        alert(1);
                    }
                }
            })
        }
    </script>
</html>

上面代码执行的是vue提供的键盘事件，但我们想用@keydown.ctrl代表按下ctrl键时就必须得自定义了，下面来介绍下vue是如何自定义键盘事件的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <!-- CTRL键的keyCode值：17 -->
            <input type="text" @keydown.myenter="show"/>
        </div>
    </body>
    <script>
        Vue.directive('on').keyCodes.ctrl = 17;     //定义了ctrl键盘
        Vue.directive('on').keyCodes.myenter=13;    //定义了Enter键盘
        window.onload = function(){
            var vm = new Vue({
                el: '#box',
                data: {
                    a: 'blue'
                },
                methods: {
                    show: function(){
                        alert(1);
                    }
                }
            })
        }
    </script>
</html>