Vue中添加针对window的键盘事件该怎么处理
因为在项目中使用了UI库,没有直接的input标签(最终渲染到html上的话,input标签外还有一层div)<b-input type="password" v-model="credentials.password" />所以键盘事件获取不到焦点,在登录页面我想加个键盘enter的全局事件,想提高一点用户体验,于是考虑采用针对
·
因为在项目中使用了UI库,没有直接的input标签(最终渲染到html上的话,input标签外还有一层div)
<b-input type="password" v-model="credentials.password" />
所以键盘事件获取不到焦点,在登录页面我想加个键盘enter的全局事件,想提高一点用户体验,于是考虑采用针对window的键盘事件,那么在这个过程中遇到了一个小问题。
其实是this的问题,在回调外面保存一下this就行了。
created(){
this.keyup()
},
methods:{
keyup(){
let This = this //存一下this
document.onkeydown = function (event) {
let e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13) {
This.userLogin() //调用下面的函数,注意This
}
};
},
userLogin(){
//登录
this.$api.abacus.login(data => {
window.localStorage.setItem('abacus.token',data.token);
this.$router.push({name:'schoolManage'});
}, this.credentials);
}
}
然后键盘事件就能用了,对于找不到焦点的问题,我觉得还应该有其余的方法,在这里直接用了window的键盘事件。
更多推荐
已为社区贡献14条内容
所有评论(0)