点击按钮,按钮的文字变为倒计时,的小技巧(适用于获取验证码)

看效果图:
点击按钮,按钮的文字变为倒计时,的小技巧(适用于获取验证码)_第1张图片

代码

<a-button
	@click="getSms"
	:disabled="myState.smsSendFlag"
	v-text="(!myState.smsSendFlag && '获取验证码') || `${myState.time} s`"
></a-button>



data(){
	return {
		myState: {
	        smsSendFlag: false,
			time: 60
		}
	}
}



async getSms() {
  const hide = this.$message.loading('验证码发送中..', 0)

  let params = {
    sms: userPhone
  }

  try {
    let { state, data, message } = await AccountApi.sendResetSms(params)
    if (state === 200) {
      this.myState.smsSendFlag = true
      const interval = setInterval(() => {
        if (this.myState.time-- <= 0) {
          this.myState.time = 60
          this.myState.smsSendFlag = false
          clearInterval(interval)
        }
      }, 1000)
    } else {
      this.$message.error(message)
    }
  } catch (error) {
    this.$message.error('网络请求连接失败~')
  }

  setTimeout(hide, 1)
},


你可能感兴趣的:(javascript)