实现思路:基于setInterval 每隔一秒刷新页面显示
<template>
<div> {{ codeBtnText }} </div>
</template>
export default {
data() {
return {
btnOptFlag: false, //获取验证码按钮禁用标识
codeBtnText: ‘获取验证码’,
outTime: 60, // 设置发送验证码倒计时时间
timer: null
}
},
methods: {
sendCode() { // 页面触发发送验证码功能
if(this.btnOptFlag) return
this.btnOptFlag = true//禁用发送验证码按钮
if(!this.timer){
this.timer = setInterval( () =>{
this.codeBtnText = this.outTime + ‘s后重新发送’
this.outTime = this.outTime - 1
if(this.outTime < 0) {//倒计时结束,重置时间器
clearInterval(this.timer)
this.codeBtnText = ‘获取验证码’
this.outTime = 60
this.timer = null
this.btnOptFlag = false
}
}, 1000)//每秒执行一次
}
}
}
vue实现手机验证码发送倒计时功能
最新推荐文章于 2024-06-11 07:57:19 发布