vue 项目中使用键盘回车按键触发事件
我最近项目要求按下enter键就登录或者注册之类的触发,我不知道为什么用vue的 @click.enter这样的不管用,到现在都没整明白为啥,希望知道的给讲解一下.然后在methods里面加上一个方法,监听这个方法,e.keyCode 是每个按键的编码,13是回车键。但是,监听不去掉不太好,有点冗余,所以可以在。vue声明周期销毁前和销毁时移除这个监听。我看了半天人家是给页面加了一个监听。
·
我最近项目要求按下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)//关闭监听键盘按下事件
},
更多推荐
已为社区贡献1条内容
所有评论(0)