1. <el-button v-bind:class="{grey:isGrey,blue:!isGrey}"
v-bind:disabled="obj.dis" type="primary"
@click="obtain()">
<span v-if="obj.show">发送验证码</span>
<span v-else>重新发送{{obj.count}}s</span>
</el-button>
2. setup(){
let obj = reactive({
dis: false,
show: true,
isGrey: false, //按钮样式
timer: null, //设置计时器,
count: ""
});
}
3.
//点击获取验证码：
function obtain() {
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
if (obj.phone == "" || obj.phone.length <= 10 || !reg.test(obj.phone)) {
ElMessage("请填写正确的手机号！！");
return;
} else {
let mins = 60
if (!obj.timer) {
obj.count = mins;
obj.isGrey = true;
obj.show = false;
obj.dis = true;
obj.timer = setInterval(() => {
if (obj.count > 0 && obj.count <= mins) {
obj.count--;
} else {
obj.dis = false;
obj.isGrey = false;
obj.show = true;
clearInterval(obj.timer);
obj.timer = null;
}
}, 1000);
}
//此处为接口
let formData = new FormData();
formData.append('phone',obj.phone)
Axios({
method: "post",
url: "/sms/send",
params: formData,
}).then((res) => {
console.log(res, "66666");
ElMessage(res.data.message);
});
}
}
点击获取验证码 60秒后可再次点击