< el-form-item label = " 短信验证码" required > < el-input v-model = " ruleForm.verificationcode" placeholder = " 请添加验证码" > < el-button v-if = " isdisabled" slot = " suffix" style = " color : #409EFF; " type = " text" @click = " getCodeBtn" > 获取验证码</ el-button> < el-button v-else slot = " suffix" style = " color : #409EFF; " type = " text" disabled > {{ counts }}s后重新发送</ el-button> </ el-input> </ el-form-item>
data ( ) { return { isdisabled: true , counts: "" , timer: null , ruleForm: { phoneNumber: '' , verificationcode: '' , } , } } , getCodeBtn ( ) { this . ruleForm. VerificationCode = '' if ( this . ruleForm. phoneNumber == "" ) { this . $message. warning ( '请添加店长手机号' ) ; return ; } if ( ! / ^1[3456789]\d{9}$ / . test ( this . ruleForm. phoneNumber) ) { this . $message. warning ( "请输入正确的手机格式" ) ; return ; } const TIME_COUNT = 60 ; if ( ! this . timer) { this . counts = TIME_COUNT ; this . isdisabled = false ; this . timer = setInterval ( ( ) => { if ( this . counts > 0 && this . counts <= TIME_COUNT ) { this . counts-- ; if ( this . counts == 0 ) { this . isdisabled = true ; } } else { clearInterval ( this . timer) ; this . timer = null ; } } , 1000 ) ; } } ,