这篇文章主要介绍“Vue怎么实现发送验证码计时器防止刷新”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么实现发送验证码计时器防止刷新”文章能帮助大家解决问题。基本实现效果按钮: &
这篇文章主要介绍“Vue怎么实现发送验证码计时器防止刷新”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么实现发送验证码计时器防止刷新”文章能帮助大家解决问题。
按钮:
<t-button @click="handleSend" :disabled="disable">{{text}}</t-button>
data:
text: '发送验证码', time: 10, timer: null, disable: false
点击发送:
handleSend() { this.disable = true this.text = this.time + 's后重新发送' this.timer = setInterval(() => { if (this.time > 0) { this.time-- this.text = this.time + 's后重新发送' } else { clearInterval(this.timer) this.time = 10 this.disable = false this.text = '重新发送' } }, 1000) }
handleSend() { this.disable = true this.text = this.time + 's后重新发送' this.timer = setInterval(() => { if (this.time > 0) { this.time-- this.text = this.time + 's后重新发送' localStorage.setItem('time', this.time) // 注意这行 } else { clearInterval(this.timer) this.time = 10 this.disable = false this.text = '重新发送' } }, 1000) }
created() { const time = localStorage.getItem('time') if (time && time > 0) { this.text = time + 's后重新发送' this.time = time this.handleSend() } }
关于“vue怎么实现发送验证码计时器防止刷新”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网精选频道,小编每天都会为大家更新不同的知识点。
--结束END--
本文标题: vue怎么实现发送验证码计时器防止刷新
本文链接: https://www.lsjlt.com/news/351190.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0