[JavaScript知识库]Vue3发送验证码-防止页面刷新-发送验证码状态改变

效果:

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. 业务逻辑代码(直接复制 , 直接复制 , 直接复制 即可)

/*定义 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 > 1) {
        _delay--;
        setStorage(_delay);
        state.second = _delay;
        state.sendAuthCode = false;
      } else {
        // 让浏览器打开的时候,显示剩余的时间
        state.sendAuthCode = true;
        window.clearInterval(state.timer);
      }
    }, 1000);
  }
}

/**
 * 页面执行
 */
judgeCode()
/*-----------------------------------验证码----------------------------*/