原文链接：https://www.jb51.net/article/168469.htm
这篇文章主要为大家详细介绍了vue获取验证码倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue获取验证码倒计时组件，供大家参考，具体内容如下
之前写过一个计时函数，有计算误差，但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。
<template>
<divclass="captcha-row">
<inputclass="captcha-input"placeholder="输入验证码"auto-focus />
<divv-if="showtime===null"class="captcha-button"@click="send">
获取验证码
</div>
<divv-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);
functioncountDownStart() {
if(self.timeCounter == null) {
returnfalse;
}
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>
