vue封装短信验证码，刷新缓存倒计时

HTML代码

<a-form-item field="verifyCode" label="验证码:"><a-input v-model="formData.verifyCode" placeholder="短信验证码" class="login-form-button" allow-clear><template #append><span:class="{ 'login-form-send': true, 'login-form-send-disabed': typeof theTime == 'number' }"@click="sendVerificationCode">{{ theTime }}{{ theTime != '发送验证码' ? 's' : '' }}</span></template></a-input></a-form-item>

ts部分

import { VueCookieNext } from 'vue-cookie-next'; //存储秒数的插件，可用localStorage代替，存储秒数加上时间戳const base = reactive<any>({theTime: '发送验证码'， // 发送验证码/倒计时})// 进页面就执行的方法const init = () => {const timeA: any = 'timeA';// 如果存储的有时间，theTime赋值为秒if (VueCookieNext.isCookieAvailable(timeA)) {const timeB = loctionTime();base.theTime = Math.trunc(Number(VueCookieNext.getCookie(timeA)) - timeB);setIntervalFunction();}}/** * @function sendVerificationCode * @description 发送验证码 */const sendVerificationCode = () => {if (typeof base.theTime == 'number') {// 已经有倒计时不允许点击return;}// 校验手机号码是否有输入base.phoneRef.validateField('mobilePhone', (valid: any) => {if (valid == void 0) {const param = {mobilePhone: base.formData.mobilePhone,type: 'REGISTER',};sendVerifyCode(param).then((res: any) => {if (res.code == 200) {base.theTime = 60;const locTime = loctionTime();const CodeData: any = locTime + 60;VueCookieNext.setCookie('timeA', CodeData, { expire: '60s' });setIntervalFunction();Message.success(res.message || '发送成功，请去手机查看！');} else {Message.error(res.message || '发送失败');}});}});};/** * @setIntervalFunction 计时器方法 */const setIntervalFunction = () => {const theBottom = setInterval(() => {if (base.theTime > 0) {base.theTime--;} else if (base.theTime == 0) {base.theTime = '发送验证码';clearInterval(theBottom);}}, 1050);};