代码展示:
<template>
<div>
<button class="btn" :class="{disabled:!this.canClick}" @click="countDown">
{{content}}
</button>
</div>
</template>
逻辑部分:
data () {
return {
content:'发送验证码',
totalTime:30,
canClick:true
}
},
methods:{
countDown(){
this.disabled = true;
if(!this.canClick){
return
}else{
this.canClick = false;
this.content = this.totalTime + 's后重新发送';
let clock = window.setInterval(()=>{
this.totalTime--
this.content = this.totalTime + 's后重新发送';
if(this.totalTime < 0){
window.clearInterval(clock);
this.content = '重新发送验证码';
this.totalTime = 30;
this.canClick = true;
}
},1000)
}
}
}
css样式:
.btn{
width:98px;
height:40px;
background-color: #E6A23C;
border: 0;
font-size: 12px;
color:white;
cursor: pointer;
border-radius: 4px;
outline: none;
}