前端开发小技巧 - 【Vue + JavaScript】 - 获取验证码按钮倒计时 + 按钮禁用 功能

前言

  • 本篇文章所使用的技术【Vue3 + Vite + Vant4】;
  • 本文主要针对的业务场景:
    • 需要使用验证码功能的地方;
    • 更多趋向于 登录 或者 修改密码 这块;
  • 以下页面结构只是针对于演示,实际的页面结构还是要大家根据的业务进行搭建;

一、构建基本页面结构

html 复制代码
<template>
    <div class="test-content">
        <van-cell-group inset>
            <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="primary" >
                        获取验证码
                    </van-button>
                </template>
            </van-field>
        </van-cell-group>
    </div>
</template>

<style scoped lang="scss">
    .test-content {
        width: 400px;
        height: 500px;
        margin: 20px auto;
        border: 2px solid red;
    }
</style>
  • 页面结构展示:

二、封装逻辑函数

  • 新建文件 src/utils/countDown.js
js 复制代码
import { ref } from 'vue';

export const countDown = () => {
    // 倒计时的时间
    const countDownTime = ref(120);
    // 倒计时的定时器
    const countDownTimerId = ref(null);
    // 倒计时按钮显示的文本
    const countDownText = ref('获取验证码');
    // 倒计时按钮的禁用状态
    const isCountDownDisabled = ref(false);

    // 倒计时函数
    const getCode = (time) => {
        countDownText.value = `${time}s后重新获取`;
        isCountDownDisabled.value = true;
        countDownTimerId.value = setInterval(() => {
            time--;
            countDownText.value = `${time}s后重新获取`;
            if (time <= 0) {
                clearInterval(countDownTimerId.value);
                countDownText.value = '获取验证码';
                isCountDownDisabled.value = false;
                countDownTime.value = 120;
            }
        }, 1000);
    };

    return { getCode, countDownTime, countDownText, isCountDownDisabled }
};

三、使用逻辑函数

html 复制代码
<script setup>
import { ref } from 'vue';
// 导入 countDown 函数
import { countDown } from '@/utils/countDown.js';
// 执行 countDown 函数,解构返回的数据和函数进行使用
const { getCode, countDownTime, isCountDownDisabled, countDownText } = countDown();
const sms = ref('');
</script>

<template>
  <div class="test-content">
    <van-cell-group inset>
      <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <template #button>
          <van-button @click="getCode(countDownTime)" size="small" type="primary" :disabled="isCountDownDisabled">{{
            countDownText
          }}</van-button>
        </template>
      </van-field>
    </van-cell-group>
  </div>
</template>
  • 效果展示:
相关推荐
sasaraku.20 分钟前
serviceWorker缓存资源
前端
RadiumAg1 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子3 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情3 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz3 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app