介绍 & lt; template>
,& lt; div 类=癱aptcha-row"比;
,& lt; input 类=癱aptcha-input",占位符=笆淙胙橹ぢ搿?auto-focus /比;
,& lt; div v=皊howtime===null",类=癱aptcha-button", @click=皊end"比;
获才能取验证码
,& lt;/div>
,& lt; div v-else 类=癱aptcha-button"比;
,,{{showtime}}
,& lt;/div>
,& lt;/div>
& lt;/template> & lt; script>
export default {
,数据(){
,return {//才能,计时器,注意需要进行销毁
,,timeCounter:空,//才能,null 则显示按钮,秒数则显示读秒
showtime才能:零
,}
},
,方法:{
,//倒计时显示处理
,countDownText (s), {
this.showtime 才能=,' ${}年代后重新获取的
},
,//倒计时,60秒,不需要很精准
,倒计时(次){
const 才能;self =,;//才能,时间间隔,1秒
const 才能;interval =, 1000;
let 才能;count =, 0;
时间=self.timeCounter 才能;setTimeout (countDownStart,间隔);
function 才能;countDownStart (), {
if 才能;(self.timeCounter ==, null), {
,,return 假;
,,}
+ +,计数
self.countDownText才能(times 作用;count +, 1);
if 才能;(count 祝辞,次),{
,,clearTimeout (self.timeCounter)
,,self.showtime =,空;
,,},{else
,,self.timeCounter =, setTimeout (countDownStart,间隔)
,,}
,,}
},
,把(){
this.countDown才能(60);
,}
},
}
& lt;/script> & lt; style lang=發ess", scoped>
.captcha-row {
,显示:flex;
,.captcha-button {
背景:大敌;# 048 fff;
,颜色:白色;
,显示:flex;
,justify-content:中心;
,对齐项目:中心;
,填充:4 rpx 8 rpx;
,宽度:320 rpx;
,这个特性:4 rpx;
,}
}
& lt;/style> Vue的优点
这篇文章给大家分享的是有关vue如何获取验证码倒计时组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体内容如下
之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。
Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
感谢各位的阅读!关于“Vue如何获取验证码倒计时组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
