短信验证码--倒计时

<!--验证码-->
<div class="phone_code_box">
            <div class="phone_box">
                <span class="phone_area">+86</span>
                <input class="phone_input" v-model="userphone" type="tel" placeholder="请输入手机号">
            </div>
            <div class="code_box clearfix">
                <input class="code_input" v-model="usercode" type="tel" placeholder="请输入验证码">
                <span class="get_code" @click="getCode">{
  {codeDes}}</span>
            </div>
        </div>

1、全局变量

let isClick = 0;//防连击
let timeOut = 60;

2、定义两个变量

codeDes: '获取验证码',//验证码描述
codeNum: 60,//验证
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue 3中,你可以使用定时器、useIntervalFn以及封装计时功能来实现验证码的计时。 首先,在你的代码中,使用定时器来实现计时功能。你可以定义一个计数器变量counter,并将其初始值设置为0。然后,在发送验证码按钮的点击事件中,根据counter的值来显示不同的文本。当counter为0时,显示"发送验证码",否则显示counter加上"秒之后再试"。同时,在点击事件中,调用后端接口发送验证码,并开启计时。每秒钟减少counter的值,直到counter为0,清除定时器。 使用useIntervalFn可以更简洁地改写这段代码。在你的Vue文件中,导入useCount自定义hook,并使用它返回的counter和start函数。在发送验证码的点击事件中,首先判断counter的值是否大于0,如果是,则返回。然后,执行手机号校验等逻辑,并调用start函数开始计时。 此外,你还可以通过在代码中使用refMobile和mobileValidate来实现一些操作。refMobile是一个input元素的引用,可以使用refMobile.value来访问该元素,并使用?.focus()方法使input元素获取焦点。mobileValidate是一个函数,用于验证手机号。 总之,在Vue 3中,你可以使用定时器、useIntervalFn以及封装计时功能来实现验证码的计时。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [验证码 - 计时 v3+ts+pinia](https://blog.csdn.net/LJM51200/article/details/125878247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值