这篇文章给大家分享的是有关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>
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
感谢各位的阅读!关于“vue如何获取验证码倒计时组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。