vue 实现60秒倒计时 然后再次点击事件加载
本人感觉特别简单的实现方法不用啥计时器啊啥的vue多强大 废话不多说下面就是怼代码复制即用点击按钮倒计时<button @click="getlogin" class="btn-bottom" type="primary" :disabled="disabled">{{ btnText }}</button>data定义data () {...
·
本人感觉特别简单的实现方法 不用啥计时器啊啥的 vue多强大 废话不多说 下面就是怼代码
复制即用
点击按钮倒计时
<button @click="getlogin" class="btn-bottom" type="primary" :disabled="disabled">{{ btnText }}</button>
data定义
data () {
return {
// 获取验证码
disabled: false,
interval:undefined,
totalCount:0,
}
}
计算属性监视
computed: {
btnText(){
return this.totalCount !==0? `${this.totalCount}秒再次获取`: "获取验证码"
}
},
methods:
getlogin(){
// 按钮60秒倒计时
this.disabled=true
this.totalCount=60
this.getCode() //60秒过倒计时过后才能调用的事件
this.interval=setInterval(()=>{
this.totalCount--
if(this.totalCount === 0){
clearInterval(this.interval)
this.disabled=false
}
},1000);
}
60秒过倒计时过后才能调用的事件
getCode(){
}
css自己定义吧 多简单 多实用
喜欢就关注我吧,我会经常更新大家在项目中实用的项目需求 复制即用 本人亲测
喜欢的可以加群一起讨论QQ:
更多推荐
已为社区贡献7条内容
所有评论(0)