vue的回車鍵按下觸發登錄事件

created(){
     window.addEventListener('keydown', this.handleKeyDown, true)//開啓監聽鍵盤按下事件
}
methods:{   
    async login() {
        this.$refs.form.validate(_ => {
          if (_) {
            const url = "/login";
            const data = {
              username: this.form.username,
              password: this.form.password
            };
            this.eldisable = true;
            const complete = () => {
              this.eldisable = false;
            }
            const success = async d => {
              if (d && d.data && d.data.token) {
                this.$message({
                  message: "登錄成功,正在跳轉...",       
                  type: "success",
                  duration: 1000
                });
                window.removeEventListener('keydown',this.handleKeyDown, true) //請求成功移除鍵盤按下事件
                this.$store.commit("LOGIN", d.data.token);
                await this.getUserInfos().then((res) => {
                  this.$router.push({path: "/index"});
                }, (rej) => {
                  this.$message({
                    message: "登錄失敗,請重試",
                    type: "error"
                  });
                })
              }
            };
            this.$axiosPost({url, data, success, complete});
          } else {
            this.$notify.error({
              title: "錯誤",
              message: "請輸入正確的用戶名密碼",
              offset: 100
            });
            return false;
          }
        });
      },
      handleKeyDown(e) {
        let key = null;
        if (window.event === undefined) {
          key = e.keyCode;
        } else {
          key = window.event.keyCode;
        }
        if (key === 13) {
          this.login();
        }
      },
      getUserInfos() {
        var prom = new Promise((resolve, reject) => {
          this.$axiosGet({
            url: "/userinfo",
            success: _ => {
              if (_.status == 1) {             
                this.setUser(_.member);            
                resolve("ok");             
              } else {               
                reject("failt")
                window.localStorage.removeItem("token");              
              }

            },
            error: _ => {
              reject("failt")
            }
          });
        })
        return prom
      },
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章