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

最新推荐文章于 2026-04-05 09:47:32 发布

原创最新推荐文章于 2026-04-05 09:47:32 发布 · 4.6k 阅读

8 ·

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

标签

#vue.js #javascript #前端

收录于

前端开发专栏收录该内容

93 篇文章

订阅专栏

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

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()
        }
    },
}