vue3 短信计时器
时间: 2023-11-23 20:57:29 浏览: 71
基于vue的短信验证码倒计时demo
以下是Vue3实现短信计时器的代码示例:
```vue
<template>
<div>
<button :disabled="disable" @click="send">{{ text }}</button>
</div>
</template>
<script>
export default {
data() {
return {
text: "发送验证码",
time: 5,
timer: null,
disable: false,
};
},
created() {
// 本地拿到时间
const time = localStorage.getItem("time");
// 判断是否大于0
if (time && time > 0) {
// 解决刷新页面按钮有空白情况
this.text = time + "s后重新发送";
this.time = time;
this.send();
}
},
methods: {
send() {
// 点击按钮,禁用按钮,防止多次点击
this.disable = true;
this.text = this.time + "s后重新发送";
localStorage.setItem("time", this.time);
this.timer = setInterval(() => {
if (this.time > 0) {
this.time--;
localStorage.setItem("time", this.time);
this.text = this.time + "s后重新发送";
} else {
clearInterval(this.timer);
this.time = 5;
this.disable = false;
this.text = "重新发送";
}
}, 1000);
},
},
};
</script>
```
阅读全文