vue实现按钮倒计时
效果如下,倒计时完了再成为蓝色状态实现代码:<el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button>export default {name: "demo",...
·
效果如下,倒计时完了再成为蓝色状态
实现代码:
<el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button>
export default {
name: "demo",
data(){
return{
getCode:'获取验证码',
isGeting:false,
count:6,
disable:false
}
},
methods:{
getVerifyCode(){
var countDown = setInterval(()=>{
if(this.count < 1){
this.isGeting = false;
this.disable = false;
this.getCode = '获取验证码';
this.count = 6;
clearInterval(countDown);
}else{
this.isGeting = true;
this.disable = true;
this.getCode = this.count-- + 's后重发';
}
},1000);
}
}
}
.codeGeting{
background: #cdcdcd;
border-color: #cdcdcd;
}
更多推荐
已为社区贡献12条内容
所有评论(0)