站长资源网络编程
vue获取验证码倒计时组件
简介本文实例为大家分享了vue获取验证码倒计时组件，供大家参考，具体内容如下之前写过一个计时函数，有计算误差，但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。
本文实例为大家分享了vue获取验证码倒计时组件，供大家参考，具体内容如下
之前写过一个计时函数，有计算误差，但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。
<template>
<div class="captcha-row">
<input class="captcha-input" placeholder="输入验证码" auto-focus />
<div v-if="showtime===null" class="captcha-button" @click="send">
获取验证码
</div>
<div v-else class="captcha-button">
{{showtime}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 计时器,注意需要进行销毁
timeCounter: null,
// null 则显示按钮 秒数则显示读秒
showtime: null
}
},
methods: {
// 倒计时显示处理
countDownText(s) {
this.showtime = `${s}s后重新获取`
},
// 倒计时 60秒 不需要很精准
countDown(times) {
const self = this;
// 时间间隔 1秒
const interval = 1000;
let count = 0;
self.timeCounter = setTimeout(countDownStart, interval);
function countDownStart() {
if (self.timeCounter == null) {
return false;
}
count++
self.countDownText(times - count + 1);
if (count > times) {
clearTimeout(self.timeCounter)
self.showtime = null;
} else {
self.timeCounter = setTimeout(countDownStart, interval)
}
}
},
send() {
this.countDown(60);
}
},
}
</script>
<style lang="less" scoped>
.captcha-row {
display: flex;
.captcha-button {
background: #048fff;
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 4rpx 8rpx;
width: 320rpx;
border-radius: 4rpx;
}
}
</style>
更多关于倒计时的文章请查看专题：《倒计时功能》
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。