在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中。这样，即使刷新页面，倒计时状态也不会丢失。