我最近项目要求按下enter键就登录或者注册之类的触发,我不知道为什么用vue的 @click.enter这样的不管用,到现在都没整明白为啥,希望知道的给讲解一下.
我看了半天人家是给页面加了一个监听
created() {
window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件
},
然后在methods里面加上一个方法,监听这个方法,e.keyCode 是每个按键的编码,13是回车键文章来源:https://www.toymoban.com/news/detail-507805.html
methods:{
// 回车和空格键提交右侧信息
handkeyCode(e) {
console.log(e); // 打印出按键后的信息
if(e.keyCode === 13){
console.log('触发了回车/空格键');
//触发登录/注册方法
this.login('loginForm')
}
},
}
但是,监听不去掉不太好,有点冗余,所以可以在beforedestory或者destoryed vue声明周期销毁前和销毁时移除这个监听文章来源地址https://www.toymoban.com/news/detail-507805.html
beforeDestroy(){
// console.log('销毁之前触发')
window.removeEventListener('keydown', this.handkeyCode, true)//关闭监听键盘按下事件
},
到了这里,关于vue 项目中使用键盘回车按键触发事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!