按钮获取验证码倒计时60秒

把倒计时存在缓存里刷新页面依旧是接着倒计时

<el-button
  size="large"
   class="btnStyle"
   :class="btnStyleClass"
   :style="buttonStyle"
   :disabled="countdownActive"
   @click="handleClick"
 >
   {{ buttonText }}
 </el-button>



const buttonStyle = {
    backgroundColor: '#AC8757', // 假设这是您设置的背景颜色
    color: '#fff',              // 假设这是您设置的文字颜色
    width: '157px',
  };
  const countdownKey = 'verificationCodeCountdown'; // localStorage的键名
  const countdownActive = ref(false);
  const buttonText = ref('获取验证码');
  const remainingTime = ref(0);
  const intervalRef = ref(null);


  const btnStyleClass = computed(() => countdownActive.value ? 'disabled' : 'btnStyle');

  function startCountdown(duration) {
    let timer = setInterval(() => {
      if (remainingTime.value > 0) {
        remainingTime.value -= 1;
        localStorage.setItem(countdownKey, remainingTime.value); // 更新localStorage
        buttonText.value = `${remainingTime.value}秒后重新获取`;
      } else {
        clearInterval(timer);
        localStorage.removeItem(countdownKey); // 清除localStorage
        countdownActive.value = false;
        buttonText.value = '获取验证码';
        remainingTime.value = 60; // 重置剩余时间
      }
    }, 1000);
    return timer; // 返回定时器引用
  }

  function restoreCountdown() {
    const savedTime = localStorage.getItem(countdownKey);
    if (savedTime && parseInt(savedTime, 10) > 0) {
      remainingTime.value = parseInt(savedTime, 10);
      buttonText.value = `${remainingTime.value}秒后重新获取`;
      countdownActive.value = true;
      intervalRef.value = startCountdown(remainingTime.value);
    }
  }

  onMounted(() => {
    restoreCountdown();
  });

  onUnmounted(() => {
    if (intervalRef.value) {
      clearInterval(intervalRef.value);
    }
  });


<style lang='scss' scoped>
  .disabled {
    /* 倒计时期间的样式，这里只添加必要的样式以保持按钮的禁用状态 */
    cursor: not-allowed;
  }
</style >