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

前言

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

一、构建基本页面结构

<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；

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 }
};

三、使用逻辑函数

<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>

• 效果展示：