验证码倒计时 code-countdown

验证码倒计时组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

使用说明

• 该组件只是一个 vue 组合式函数，没有 ui 界面。

<template>
    <pure-button :text="tips" @onClick="handleSendSMSCode" :disabled="isCountdown" class="pure-button-primary"></pure-button>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 引入组件（组合式函数）
    import { usePureCodeCountdown } from "@/uni_modules/pure-code-countdown";

    // 按钮默认文本
    const btnText = ref("发送验证码");
    // 倒计时总秒数
    const totalSeconds = ref(30);

    // 按钮提示
    const tips = computed(() => {
        // 正在倒计时中
        if (isCountdown.value) {
            return `${seconds.value}s后重新获取`;
        }
        return btnText.value;
    });

    // 使用
    // seconds: 当前剩余秒数
    // start: 开始倒计时函数，调用该函数后会开始倒计时
    // isCountdown: 是否正在倒计时中
    // clear: 清除存储的数据。
    // 第一个参数为组件的 key，设置后，重新进入页面或刷新页面后，会继续倒计时，如果不设置，则不会继续倒计时，如果设置了，但是又不想继续倒计时，可以调用 clear 方法清除存储的数据。
    // 第二个参数为倒计时总秒数，单位为秒，默认为 60 秒。
    // 第三个参数为倒计时结束后的回调函数，可选。
    const { seconds, start, isCountdown, clearCacheData } = usePureCodeCountdown("in-page-code-countdown", totalSeconds, countdownEndFn);

    // 倒计时结束函数
    function countdownEndFn() {
        console.log("倒计时结束");
        btnText.value = "重新发送";
    }

    // 发送验证码
    function handleSendSMSCode() {
        start();
    }
</script>

参数

事件名	说明	类型	版本
key	用于标识组件	String	+1.0.0
total	倒计时总秒数	Number	+1.0.0
endFn	倒计时结束后的回调函数	Function	+1.0.0

暴漏的属性

属性名	说明	类型	默认值	可选值	版本
seconds	当前剩余秒数	Number	传入的倒计时总秒数	-	+1.0.0
isCountdown	是否正在倒计时中	Boolean	false	-	+1.0.0

暴漏的方法

方法名	说明	参数	版本
start	开始倒计时方法	-	+1.0.0
clear	清除存储的数据，清除后重新进入页面或刷新页面后不会继续倒计时	-	+1.0.0