<div class="input-group mb-3 px-5">
<span class="input-group-text">验证码</span>
<input
type="text"
v-model="user.password"
class="form-control"
aria-label="Amount (to the nearest dollar)"
required
/>
<button
type="button"
@click="getCode"
:disabled="isDisposed"
class="btn btn-primary"
>
{{ isDisposed ? `${time}s后重新获取` : "获取验证码" }}
</button>
</div>
获取验证码方法:
const getCode = () => {
if (openTitle.value) {
alert("请输入正确的手机号");
return;
}
const { username } = user.value;
console.log("获取验证码", username);
axios
.get("auth/register/getverify", { params: { username } })
.then((res) => {
console.log("获取验证码结果", res);
if (res.data.errcode == 0) {
console.log("验证码发送成功!");
isDisposed.value = true;
handleTimeChange();
} else alert(res.data.msg);
});
};
倒计时:
const handleTimeChange = () => {
if (time.value <= 0) {
isDisposed.value = false;
time.value = 60;
} else {
setTimeout(() => {
time.value--;
handleTimeChange();
}, 1000);
}
};
const time = ref(60);
const isDisposed = ref(false);