vue自定义获取验证码组件，倒计时60秒

vue自定义获取验证码组件，倒计时60秒

多读多写多记录，多学多练多思考。----------- 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) {unt = num;this.show = false;this.timer = setInterval(() => {if (unt > 0 && unt <= num) {unt--;} 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,其他的也适用，只是稍微改动代码即可！

好了，就是这些了，希望能帮助到一些朋友吧！！！