一、Vue验证码倒计时刷新
验证码是应用程序中常用的功能，倒计时60秒的按钮是验证码常见的实现方式。在Vue中，可以使用定时器来实现倒计时刷新。
首先，在Vue组件中声明一个变量代表剩余时间，该变量的初始值为60（表示60秒）。另外，还需要声明一个计时器，用于每隔一秒更新剩余时间，直到剩余时间为0。在计时器中，每一秒将剩余时间减1，同时更新显示在页面上的倒计时。
<template>
<button @click="refreshCode()" :disabled="disabled">{{ textBtn }}</button>
</template>
<script>
export default {
data() {
return {
remainingTime: 60,
timer: null
}
},
computed: {
disabled() {
return this.remainingTime !== 60;
},
textBtn() {
return this.disabled ? `${this.remainingTime}秒后可重新发送` : '获取验证码';
}
},
methods: {
refreshCode() {
this.remainingTime = 60;
this.timer = setInterval(() => {
this.remainingTime--;
if (this.remainingTime === 0) clearInterval(this.timer);
}, 1000);
}
},
destroyed() {
clearInterval(this.timer);
}
}
</script>
在代码中，使用disabled来控制按钮是否可用。当剩余时间不为60秒时，按钮将变为灰色且无法点击，表示还需要等待一段时间才能重新发送验证码。同时，在计时器结束后需要清除计时器，否则计时器将一直运行下去。
二、Vue发送验证码倒计时
发送验证码倒计时与验证码倒计时刷新的实现方式较为相似，不同之处在于发送验证码需要调用后端API，而刷新验证码则是直接在前端更新剩余时间。
首先，在发送验证码的函数中，需要调用后端API并等待返回结果。当接收到成功的响应后，才开始启动倒计时计时器。与刷新验证码不同的是，在启动计时器之前，要将发送按钮禁用掉。另外，在计时器结束后，也要将按钮重新启用。
<template>
<button @click="sendCode()" :disabled="disabled">{{ textBtn }}</button>
</template>
<script>
export default {
data() {
return {
remainingTime: 60,
timer: null,
disabled: false
}
},
computed: {
textBtn() {
return this.disabled ? `${this.remainingTime}秒后重新获取` : '获取验证码';
}
},
methods: {
async sendCode() {
if (this.disabled) return;
this.disabled = true;
try {
// 调用后端API发送验证码
// 等待成功响应
this.timer = setInterval(() => {
this.remainingTime--;
if (this.remainingTime === 0) {
clearInterval(this.timer);
this.disabled = false;
}
}, 1000);
} catch (error) {
// 出错处理
this.disabled = false;
}
}
},
destroyed() {
clearInterval(this.timer);
}
}
</script>
三、Vue短信验证码倒计时
短信验证码是应用程序中常用的验证码类型之一。与获取验证码不同的是，短信验证码是通过手机平台发送而非后端API。同样，短信验证码倒计时也需要在发送成功后启动计时器。
前端代码如下：
<template>
<button @click="sendCode()" :disabled="disabled">{{ textBtn }}</button>
</template>
<script>
export default {
data() {
return {
remainingTime: 60,
timer: null,
disabled: false
}
},
computed: {
textBtn() {
return this.disabled ? `${this.remainingTime}秒后重新获取` : '获取短信验证码';
}
},
methods: {
async sendCode() {
if (this.disabled) return;
this.disabled = true;
try {
// 调用手机平台API发送短信验证码
// 等待发送成功
this.timer = setInterval(() => {
this.remainingTime--;
if (this.remainingTime === 0) {
clearInterval(this.timer);
this.disabled = false;
}
}, 1000);
} catch (error) {
// 出错处理
this.disabled = false;
}
}
},
destroyed() {
clearInterval(this.timer);
}
}
</script>
四、Vue实现验证码倒计时
实现验证码倒计时需要考虑到倒计时的场景和需要调用的API或函数。倒计时可以出现在多个地方，例如通过短信验证码登录、发送系统消息、重设密码等。因此，在实现验证码倒计时时应该尽量通用，方便在各种场景中复用。
首先，在Vue组件中声明一个计时器timer和一个剩余时间remainingTime。计时器用于定时更新剩余时间，剩余时间初始值为60。同时，还需要声明一个参数controlled，用于判断倒计时是否被控制。
在计时器中，每秒减1，直到为0。如果倒计时被控制，可以通过触发自定义事件来控制倒计时。在每次更新剩余时间时，判断剩余时间是否为0，如果为0则停止计时器。
<template>
<button @click="refreshCode()" :disabled="disabled">{{ remainingTime }}</button>
</template>
<script>
export default {
props: {
controlled: {
type: Boolean,
default: false
}
},
data() {
return {
remainingTime: 60,
timer: null,
disabled: true
}
},
watch: {
controlled(newVal) {
if (newVal) clearInterval(this.timer);
this.disabled = !newVal;
this.remainingTime = 60;
}
},
mounted() {
if (!this.controlled) {
this.timer = setInterval(() => {
this.remainingTime--;
if (this.remainingTime === 0) clearInterval(this.timer);
}, 1000);
}
},
methods: {
refreshCode() {
if (!this.controlled) return;
this.$emit('refresh');
clearInterval(this.timer);
this.disabled = true;
this.remainingTime = 60;
}
}
}
</script>
使用时，可以将controlled设置为true，并在父组件中监听组件的refresh事件即可控制倒计时的开始和结束。代码如下：
<template>
<div>
<my-countdown :controlled="controlled" @refresh="resetCountdown" />
<button @click="startCountdown">开始倒计时</button>
</div>
</template>
<script>
import MyCountdown from './MyCountdown.vue';
export default {
components: {
MyCountdown
},
data() {
return {
controlled: false
}
},
methods: {
startCountdown() {
this.controlled = true;
setTimeout(() => {
this.controlled = false;
}, 5000);
},
resetCountdown() {
this.controlled = false;
}
}
}
</script>
在上面的代码中，通过点击“开始倒计时”按钮来控制倒计时的开始和结束。当按钮被点击时，将controlled设置为true，此时倒计时组件将不会自动开始计时器，直到监听到了refresh事件，才会开始计数。5秒后我们又将controlled设置为false，此时组件又会变为自动计时的状态。
