vue3 短信计时器

以下是Vue3实现短信计时器的代码示例：

<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>