因为在项目中使用了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的键盘事件。

Logo

前往低代码交流专区

更多推荐