我最近项目要求按下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)//关闭监听键盘按下事件
 },
Logo

前往低代码交流专区

更多推荐