vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！

Posted on 2019-10-24 07:51  liwids  阅读(5835)  评论(0)  编辑  收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/vue.min.js"></script>
    <title>触发键盘事件</title>
</head>
<body>
    <div id="itany">
        <!-- 触发键盘事件 -->
        <!-- 第一种：原生js -->
        <!-- <input type="text" @keydown="show2($event)"> -->
        <!-- 第二种vue提供 -->
        <input type="text" @keydown.13="show()">
        <!-- 或 -->
        <input type="text" @keydown.enter="show()">
        <!-- 自定义键位别名 -->
        <input type="text" @keydown.f1="show3()">
    </div>
</body>
<script>
        window.onload = function(){
            //自定义键位别名
            Vue.config.keyCodes = {
                a:65,
                f1:112
            }
            new Vue({
                el:'#itany',
                data:{

                },
                methods: {
                    // 第一种
                    show2(e){
                        if(e.keyCode == 13){
                            console.log('您按下了回车！');
                        }
                    },

                    // 第二种
                    show(){
                        console.log('您按下了回车！');
                    },
                    // 自定义键位别名
                    show3(){
                        console.log('您按下了f1！');
                    }

                }
            });
    }

</script>
</html>