Vue3发送验证码-防止页面刷新-发送验证码状态改变

本文详细介绍了如何使用Vue.js构建一个动态的验证码发送功能,包括v-show控制的显示切换、一分钟倒计时逻辑以及防止刷新的存储和判断机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果:

在这里插入图片描述

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
    }
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值