多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)
自定义一个获取验证码的组件,点击按钮实现倒计时60秒
1.首先在页面html中写两个按钮,用v-show指令控制其显示隐藏
//页面按钮
<button @click="getCode" id="d" class="getphone" v-show="show">获取验证码</button>
<button class="blue" v-show="!show" disabled="disabled">{{count}}秒后重新发送</button>
2.javaScript中逻辑
data(){
return {
count: '',
timer: null,
show: true,
}
},
methods:{
getCode() {
const num = 60;
if (!this.timer) {
this.count = num;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= num) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
3.最后再设计一下样式就大工告成了
.getphone {
display: block;
height: 46px;
font-size: 22px;
color: #aaaaaa;
border: 1px solid #e6e6e6;
text-align: center;
border-radius: 23px;
background: white;
box-sizing: border-box;
padding:0 20px;
line-height: 46px;
}
.blue {
color: #508bef;
display: block;
height: 46px;
line-height: 46px;
font-size: 22px;
text-align: center;
border: 1px solid #e6e6e6;
border-radius: 23px;
box-sizing: border-box;
padding:0 20px;
}
注:此方法并不只适用于vue,其他的也适用,只是稍微改动代码即可!
好了,就是这些了,希望能帮助到一些朋友吧!!!