vue获取验证码倒计时组件

本文实例为大家分享了某视频剪辑软件获取验证码倒计时组件，供大家参考，具体内容如下

之前写过一个计时函数，有计算误差，但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。

模板div class='captcha-row '输入class='验证码-输入'占位符='输入验证码自动对焦/div v-if=' show time===null ' class=' captcha-button ' @ click=' send '获取验证码/div/div v-else class=' captcha-button ' { show time } }/div/div/template script导出默认值{ data(){ return {//计时器，注意需要进行销毁时间计数器：为空，//为空则显示按钮秒数则显示读秒showtime: null } }，methods: { //倒计时显示处理倒计时文本{ this。放映时间=` $ { s } s后重新获取` }, //倒计时60秒不需要很精准倒计时(次){ const self=this//时间间隔一秒常量间隔=1000;让计数=0;自我。时间计数器=setTimeout(countdowstart，interval)；函数countdowstart(){ if(self。时间计数器==null){返回false}计算自我。倒计时文本(次数-计数1)；如果(计数次数){ cleartime out(self。时间计数器)自我。显示时间=空；} else { self。时间计数器=setTimeout(countdowstart，interval) }，send() { this。倒计时(60);} }，}/scriptstyle lang='less '作用域。captcha-row { display : flex；验证码按钮{ background : # 048 fffcolor :白色；display : flex justice-内容中心：align-items:居中；padding: 4rpx 8rpx宽度： 320 rpx边界半径： 4rpx} }/样式更多关于倒计时的文章请查看专题： 《倒计时功能》

更多Java脚本语言时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。