場景：

在點擊獲取驗證碼后，驗證碼開始倒計時，在點擊登錄后，出現彈窗不跳轉頁面。因此在出現彈窗后，即使倒計時沒有結束，也要將倒計時的文字變為重新獲取驗證碼。

template代碼

    <div class="form-box"><el-form ref="form" :model="form"><el-form-item prop="phoneNo"><el-inputv-model="form.phoneNo"type="number"placeholder="請輸入手機號"></el-input></el-form-item><el-form-item prop="validateCode" class="code"><el-inputv-model="form.validateCode"placeholder="請輸入驗證碼"maxlength="6"></el-input><el-button:disabled="btnStatus"@click="getMyCode"class="code-btn">{{ codeMessage }}</el-button></el-form-item><el-form-item><el-button class="form-subimt" @click="toLoginH5">登錄</el-button></el-form-item></el-form></div>

?css代碼

  .form-box {padding: 0px 20px 0px 20px;margin-bottom: 24px;::v-deep .el-form-item {margin-bottom: 12px;}::v-deep .el-input__inner {border: none;border-radius: 30px;}::v-deep .el-form-item__content {margin-left: 0px;display: flex;}.code {background: #fff;border-radius: 30px;/deep/.el-input {width: 60%;}//   ::v-deep .el-form-item__content {//     margin-left: 0px;//   }/deep/.el-button {border-radius: 20px;// width: 43%;padding: 12px;// margin-left: 2%;background: #fff;color: #1448ff;border: none;flex: 1;text-align: right;}}.form-subimt {border-radius: 30px;background: radial-gradient(85.8% 72.34% at 49.85% 92.55%,#349eff 0%,rgba(53, 72, 255, 0) 100%),linear-gradient(180deg, rgba(53, 71, 255, 0) 15.92%, #3385ff 102.36%),linear-gradient(89deg, #1463ff -5.8%, #7214ff 119.36%);box-shadow: 0px 4px 10px 0px rgba(20, 72, 255, 0.2);width: 100%;color: #fff;text-align: center;font-family: PingFang SC;font-size: 16px;font-style: normal;font-weight: 600;line-height: 24px; /* 150% */margin-top: 8px;height: 48px;}}

js代碼

data(){timePromise: null,codeMessage: "獲取驗證碼",btnStatus: false,
}//登陸toLoginH5() {if (this.form.phoneNo === "") {this.$message.error("請輸入手機號");return false;}if (!/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(this.form.phoneNo)) {this.$message.error("手機號格式錯誤");return false;}if (!this.form.validateCode.length) {this.$message.error("請輸入驗證碼");return false;}loginH5({telephone: this.form.phoneNo,validateCode: this.form.validateCode,}).then((res) => {if (res.data.data.type == 1) {this.showModalAlready = true;  彈窗開關clearInterval(this.timePromise);  在獲取到結果后就清除倒計時this.codeMessage = "重發驗證碼";this.btnStatus = false;this.form = {phoneNo: "",validateCode: "",};});},//獲取驗證碼getMyCode() {this.btnStatus = true;if (this.form.phoneNo == "") {this.btnStatus = false;return false;}if (!/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/.test(this.form.phoneNo)) {this.btnStatus = false;return false;}var second = null;this.timePromise = undefined;if (second === null) {second = 60;getCode({ phoneNo: this.form.phoneNo }).then((res) => {if (res.data.code == "0") {this.$message.success("驗證碼發送成功");this.loading = false;const _this = this;this.timePromise = setInterval(function () {if (second <= 0) {clearInterval(this.timePromise);this.timePromise = undefined;second = null;_this.codeMessage = "重發驗證碼";_this.btnStatus = false;} else {_this.codeMessage = second + "s";second--;}}, 1000);} else {this.loading = false;this.$message.error(res.data.msg);}}).catch((err) => {this.btnStatus = false;this.loading = false;second = null;});} else {return false;}},

?