vue 项目中使用键盘回车按键触发事件

最新推荐文章于 2024-09-27 15:11:21 发布

原创最新推荐文章于 2024-09-27 15:11:21 发布 · 3.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在Vue项目中，由于@click.enter不起作用，开发者通过添加window.addEventListener(keydown,this.handkeyCode,true)来监听键盘事件，尤其关注回车键（键码13）。当检测到回车键被按下时，调用this.login(loginForm)进行登录或注册操作。为了避免内存泄漏，使用beforeDestroy生命周期钩子移除监听器。

我最近项目要求按下enter键就登录或者注册之类的触发,我不知道为什么用vue的 @click.enter这样的不管用,到现在都没整明白为啥,希望知道的给讲解一下.

我看了半天人家是给页面加了一个监听

created() {
    window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件
},

然后在methods里面加上一个方法,监听这个方法,e.keyCode 是每个按键的编码，13是回车键


methods:{
    // 回车和空格键提交右侧信息
    handkeyCode(e) {
       console.log(e); // 打印出按键后的信息
       if(e.keyCode === 13){
           console.log('触发了回车/空格键');
            //触发登录/注册方法
            this.login('loginForm')
       }
    },
}

但是,监听不去掉不太好,有点冗余,所以可以在beforedestory或者destoryed vue声明周期销毁前和销毁时移除这个监听

beforeDestroy(){
    // console.log('销毁之前触发')
    window.removeEventListener('keydown', this.handkeyCode, true)//关闭监听键盘按下事件
 },