效果:

1.页面DOM

<div v-show="state.sendAuthCode" @click="getCode">发送验证码</div>
<div v-show="!state.sendAuthCode" ><span class="auth_text_blue">{{state.second}} </span>s</div>

2. 业务逻辑代码(直接复制 , 直接复制 , 直接复制 即可)

新建hooks/useLoginJudgeCode.js 文件

import {reactive,toRefs} from 'vue'
export default function useLoginJudgeCode() {/*定义 data 数据*/const state = reactive({sendAuthCode: true,/* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */second: 60, /* 一分钟 倒计时*/timer: null  /* 倒计时 计数器,防止点击的时候触发多个setInterval*/})const getCode = () => {if (state.sendAuthCode) {state.sendAuthCode = false;let interval = window.setInterval(function () {setStorage(state.second);if (state.second-- <= 0) {/* 如果 倒计时完毕 重新赋值*/state.second = 60;state.sendAuthCode = true;window.clearInterval(interval);}}, 1000);}}/*** 存储 验证码 防止刷新* `用处`: 防止页面刷新 发送验证码状态改变* */const setStorage = (parm) => {localStorage.setItem("dalay", parm);localStorage.setItem("_time", new Date().getTime());};/*** 获取 缓存 数据* `用处`: 防止页面刷新 发送验证码状态改变* */const getStorage = () => {let localDelay = {};localDelay.delay = localStorage.getItem("dalay");localDelay.sec = localStorage.getItem("_time");return localDelay;}/***  判断*  */const judgeCode = () => {// 获取缓存中的数据let localDelay = getStorage();let secTime = parseInt((new Date().getTime() - localDelay.sec) / 1000);if (secTime > localDelay.delay) {state.sendAuthCode = true;} else {state.sendAuthCode = false;let _delay = localDelay.delay - secTime;state.second = _delay;state.timer = setInterval(() => {if (_delay > 0) {_delay--;setStorage(_delay);state.second = _delay;state.sendAuthCode = false;} else {// 让浏览器打开的时候,显示剩余的时间state.sendAuthCode = true;localStorage.removeItem("dalay");localStorage.removeItem("_time");window.clearInterval(state.timer);}}, 1000);}}/*** 页面执行*/// judgeCode()return{state,getCode,judgeCode}
}