vue实现发送短信倒计时和重发短信功能的示例详解
更新时间:2023年12月05日 11:00:45 作者:手️摘星辰
这篇文章主要给大家介绍了vue实现发送短信倒计时和重发短信功能的相关知识,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
js实现发送短信倒计时功能
HTML代码部分
<el-button @click="queryBtn()" type="primary">发送短信({{countDown}})</el-button> <el-button @click="resetBtn()" type="danger" :disabled="resetBtndisab">重发</el-button>
JS代码部分
export default { data(){ return { countDown:60, // 默认时间60秒 countDownTimeout:null, // 倒计时计数器 resetBtndisab:true, //重发按钮初始值为不可用 } }, methods:{ // 查询按钮 queryBtn(){ this.doCountDown() }, // 重置按钮 resetBtn(){ this.$message({ message: '短信验证码已发送,请注意查收!', type: 'success' }); this.resetCountDown(); this.resetBtndisab=true }, // 倒计时开始 doCountDown(){ this.countDownTimeout=setTimeout(()=>{ this.countDown--; if(this.countDown<=0){ this.resetBtndisab=false }else{ this.doCountDown(this.countDown) } },1000) }, // 重置倒计时 resetCountDown(){ clearTimeout(this.countDownTimeout); this.countDown=60; } } }
实际展示效果
以上就是vue实现发送短信倒计时和重发短信功能的示例详解的详细内容,更多关于vue发送短信倒计时的资料请关注脚本之家其它相关文章!
相关文章
Vue3项目pc端浏览器样式正常但移动端部分样式失效问题的解决方法
这篇文章主要介绍了Vue3项目pc端浏览器样式正常但移动端部分样式失效问题的解决方法,文中通过图文讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-07-07vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
这篇文章主要介绍了vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03el-select 数据回显,只显示value不显示lable问题
这篇文章主要介绍了el-select 数据回显,只显示value不显示lable问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论