vue实现验证码倒计时按钮 vue实现验证码倒计时按钮

本文实例为大家分享了vue实现验证码倒计时按钮的具体代码，供大家参考，具体内容如下
【vue实现验证码倒计时按钮】1、点击“发送验证码”按钮后进行逻辑判断：
?? 如果邮箱已输入且格式正确：按钮变为“已发送” ，此时为不可点击状态并开始120s倒计时；
?? 如果邮箱未输入或格式不正确：显示错误的提示信息。

2、120s倒计时结束后按钮变为“重新发送验证码” 。
html:

{{tip}} //出错提示

js:

data() {return {tip: "用Email找回密码",isTip: false,isActive: true,showNum: false,wait_timer: false,hasError: false,email: ""}},methods: {cancelError: function(event) {this.hasError = false; this.isActive = true; this.isTip = false; this.tip = "用Email找回密码"; },getCode: function() {if (this.wait_timer > 0) {return false; }if (!this.email) {this.hasError = true; this.isActive = false; this.isTip = true; this.tip = "Email不能为空"; return false; }if (!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.email)) {this.hasError = true; this.isActive = false; this.isTip = true; this.tip = "Email地址无效"; return false; }this.showNum = true; this.wait_timer = 120; var that = this; var timer_interval = setInterval(function() {if (that.wait_timer > 0) {that.wait_timer--; } else {clearInterval(timer_interval); }}, 1000); //在这里调取你获取验证码的ajax},getCodeText: function() {if (this.wait_timer > 0) {return "已发送"; }if (this.wait_timer === 0) {this.showNum = false; return "重新发送验证码！"; }if (this.wait_timer === false) {return "发送验证码！"; }},}

css:

.ret_icon-email {background: url(../../assets/pics/email.svg) no-repeat; //图片为本地图片width: 20px; height: 20px; position: absolute; top: 12px; left: 16px; }.input_email0 {border: 1px solid rgba(239, 83, 80, 1); }.input_number {width: 112px; height: 44px; text-indent: 16px; margin-right: 12px; }.btn_number {width: 154px; height: 44px; border-radius: 4px; box-sizing: border-box; border: 1px solid rgba(76, 175, 80, 1); line-height: 16px; outline: none; }.span_number {color: rgba(76, 175, 80, 1); }.btn_number.gray {background: rgba(242, 244, 245, 1); border: 1px solid rgba(0, 0, 0, 0.05); }.span_number.gray_span {color: #9a9c9a; }.num_green.num {color: rgba(76, 175, 80, 1); }

效果图：