ElementUi 获取验证码（刷新页面不会清除倒计时）

在Element UI中，如果要实现获取验证码的功能，并且在刷新页面时不清除倒计时，你需要使用前端的本地存储（如localStorage）来保存倒计时的状态。以下是一个简单的实现示例：

<template>
  <div>
    <el-input v-model="input" placeholder="请输入验证码"></el-input>
    <el-button :disabled="countdown > 0" @click="getCaptcha">
      {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
    </el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      input: '',
      countdown: 0,
    };
  },
  created() {
    this.restoreCountdown();
  },
  methods: {
    getCaptcha() {
      // 这里应该是调用API获取验证码的逻辑
      this.simulateCaptcha();
    },
    simulateCaptcha() {
      this.countdown = 60; // 假设倒计时60秒
      this.startCountdown();
      this.saveCountdown();
    },
    startCountdown() {
      if (this.countdown > 0) {
        setTimeout(() => {
          this.countdown -= 1;
          this.startCountdown();
        }, 1000);
      }
    },
    saveCountdown() {
      localStorage.setItem('captchaCountdown', this.countdown.toString());
    },
    restoreCountdown() {
      const savedCountdown = parseInt(localStorage.getItem('captchaCountdown'), 10);
      if (!isNaN(savedCountdown)) {
        this.countdown = savedCountdown;
        this.startCountdown();
      }
    },
  },
};
</script>

在这个示例中，我们使用了localStorage来保存倒计时的秒数。在页面加载时（created 钩子中），我们尝试从localStorage中恢复倒计时的秒数，如果存在并且不为NaN，则开始倒计时。同时，在获取验证码时，我们更新了倒计时的秒数，并开始倒计时，并保存到localStorage中。这样，即使刷新页面，倒计时状态也不会丢失。