1、效果
2 代码部分
// 注册获取验证码
async getVerifyCode (tag) {
var form = {}
if (this.validatePhone(tag)) {
this.validateBtn()
switch (tag) {
case 'stu':
form = this.registerForm
break
case 'tea':
form = this.teaRegisterForm
break
default:
break
}
await this.$http.post('Message/registerMessage', {
phonenum: form.phone
})
}
},
// 60s倒计时
validateBtn () {
let time = 60
const timer = setInterval(() => {
if (time === 0) {
clearInterval(timer)
this.btnTitle = '获取验证码'
this.disabled = false
} else {
// 倒计时
this.btnTitle = time + '秒后重试'
this.disabled = true
time -= 1
}
}, 1000)
<el-form-item label="验证码:" prop="code">
<el-input
v-model="teaRegisterForm.code"
placeholder="请输入验证码"
autocomplete="off"
></el-input>
</el-form-item>
<el-button v-if="btnTitle" :disabled = 'disabled' class="getCode" @click="getVerifyCode('stu')">{{btnTitle}}</el-button>