element ui message 同一个方法内多次调用message重叠问题

原代码(同一个函数内,多次调用this.$message,弹窗内容会重叠):

submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$refs.button_submit.loading = true
          this.$axios.request(
            // 发送axios请求
            {
              url: '/alterpassword/', // 请求路径
              method: 'put', // 请求方式
              data: {
                // 要发送的数据
                old_password: this.alterpasswdForm.oldpass,
                new_password: this.alterpasswdForm.newpass
              },
              responseType: 'json' // 期望返回的类型是json格式
            }
          ).then(function (response) {
            that.$refs.button_submit.loading = false
            // 把返回的结果交给回调函数处理
            console.log(response.data)
            if (response.data['code'] === 200) {
              this.$message.success(response.data)
              this.$message.info('请重新登录')
              this.isVisible = false
              sessionStorage.removeItem('token')
              sessionStorage.clear()
              this.$router.push('/login')
            } else {
              that.$message({ type: 'warning', message: response.data })
            }
          }).catch(error => {
            console.log(error)
            this.$message({ type: 'warning', message: error })
            this.$refs.button_submit.loading = false
          })
        } else {
          console.log('请输入合法用户名和密码')
          return false
        }
      })
    },

使用async、await实现不重叠:

submitForm (formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$refs.button_submit.loading = true
          this.$axios.request(
            // 发送axios请求
            {
              url: '/alterpassword/', // 请求路径
              method: 'put', // 请求方式
              data: {
                // 要发送的数据
                old_password: this.alterpasswdForm.oldpass,
                new_password: this.alterpasswdForm.newpass
              },
              responseType: 'json' // 期望返回的类型是json格式
            }
          ).then(async function (response) {
            that.$refs.button_submit.loading = false
            // 把返回的结果交给回调函数处理
            console.log(response.data)
            if (response.data['code'] === 200) {
              await that.$message.success(response.data)
              await that.$message.info('请重新登录')
              that.isVisible = false
              sessionStorage.removeItem('token')
              sessionStorage.clear()
              that.$router.push('/login')
            } else {
              that.$message({ type: 'warning', message: response.data })
            }
          }).catch(error => {
            console.log(error)
            this.$message({ type: 'warning', message: error })
            this.$refs.button_submit.loading = false
          })
        } else {
          console.log('请输入合法用户名和密码')
          return false
        }
      })
    },

You may also like...

发表评论