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

Posted 2020-11-16 liwids-blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！相关的知识，希望对你有一定的参考价值。

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

以上是关于vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！的主要内容，如果未能解决你的问题，请参考以下文章

vue事件修饰符和键盘事件

自定义vue点击事件传递数据

vue 子组件绑定事件无效

2019-07-10 在vue UI组件事件中基于已有参数灵活自定义传参

Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件

jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件篇）