看效果图:
代码
<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 = trueconst interval = setInterval(() => {if (this.myState.time-- <= 0) {this.myState.time = 60this.myState.smsSendFlag = falseclearInterval(interval)}}, 1000)} else {this.$message.error(message)}} catch (error) {this.$message.error('网络请求连接失败~')}setTimeout(hide, 1)
},