vue全局监听Esc，enter按键事件

最新推荐文章于 2025-03-31 08:45:15 发布

加蓓努力我先飞

最新推荐文章于 2025-03-31 08:45:15 发布

阅读量4.4k

点赞数 1

分类专栏：前端开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ingenuou_/article/details/127325675

版权

前端开发专栏收录该内容

93 篇文章

订阅专栏

本文介绍了在Vue.js中如何监听键盘事件，包括直接在mounted生命周期钩子内添加事件监听器来捕获Esc按键，以及在created钩子内封装方法监听回车键的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.直接写监听

mounted() {
    //监听键盘Esc按键事件
    this.$nextTick(function() {
        // 按下键盘
        document.addEventListener('keydown', function(e) {
            // Esc按键是27 
            if (e.keyCode == 27) {
                //在这里写你的操作逻辑
                console.log("打印了");
            }
        });
    });
}

2.将监听内容封装到方法里

created() {
     window.addEventListener("keyup", this.enterSearch)
},
methods:{
    enterSearch: function(e) {
    	//监听回车
        if (e.keyCode === 13) {
        	//在这里写你的操作逻辑
            //this.adduser()
        }
    },
}