CodeVerify 验证码倒计时

此组件实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件不提供界面显示，只提供倒计时文本，由用户将文本嵌入到具体的场景。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 ref 获取组件实例，再执行后面的操作，示例：

通过 seconds 属性设置需要倒计时的秒数（默认 60 秒）
通过 ref 调用组件内部的方法 start 方法调用发送事件，或者通过 send 回调函数来处理发送事件
通过 ref 调用组件内部的方法 startTimer 方法开始倒计时
通过监听 change 事件（从开始到结束之间，每秒触发一次）获得提示的文字内容，可以自定义

html

<template>
    <fu-code-verify
        ref="codeVerifyRef"
        :seconds="seconds"
        @send="handleSend"
        @end="handleEnd"
        @change="handleChange"
    ></fu-code-verify>
</template>

<script setup>
    import { ref } from 'vue';
    
    // data数据
    const codeVerifyRef = ref();
    const seconds = 25;
    
    // methods方法
    const handleSend = () => {
        // 模拟向后端请求验证码
        setTimeout(() => {
            uni.$fu.toast('验证码发送成功')
            // 通知验证码组件内部开始倒计时
            codeVerifyRef.value.startTimer()
        }, 500)
    };

    const handleEnd = () => {
        uni.$fu.toast('倒计时结束')
    };
    
    const handleChange = (e) => {
        console.log('倒计时: ', e);
    };
</script>

设置提示语

组件内部有内置的提示语，如发送前的提示语为 获取验证码，用户可以通过参数配置自定义的提示语：

发送前，属性为 startText，默认值为 获取验证码
发送中，属性为 sendText，默认值为 请稍候...
倒计时中，属性为 changeText，默认值为 X秒重新获取
倒计时结束，属性为 endText，默认值为 重新获取

设置保持倒计时

一般情况下，再H5刷新浏览器时，或者各端返回再次进入时，倒计时会消失，导致用户可以再次尝试获取验证码，虽然后端还会对此进一步的判断。

对于这种情况下，fusions-ui提供了一个 keepRunning 属性（默认 false），为 true 的时候，即时刷新浏览器，或者返回上一个页面，倒计时依然会继续（倒计时未结束的话）

注意：如果您的一个页面或者多个页面同时使用了多个此组件，为防止多个组件之间，保存在本地的多个继续倒计时的变量之间互相干扰，可以设置各个组件的 uniqueKey 属性，来区分各个组件的变量。

html

<template>
    <!-- A.vue -->
    <fu-code-verify uniqueKey="pageA"></fu-code-verify>

    <!-- B.vue -->
    <fu-code-verify uniqueKey="pageB"></fu-code-verify>

API

CodeVerify Props

属性名	说明	类型	默认值	可选值
seconds	倒计时所需秒数	Number	60	-
startText	发送前的提示语，详见上方设置提示语	String	获取验证码	-
sendText	发送中时的提示语，详见上方设置提示语	String	请稍候...	-
changeText	倒计时中时的提示语，详见上方设置提示语	String	X秒重新获取	-
endText	倒计时结束时的提示语，详见上方设置提示语	String	重新获取	-
width	按钮宽度	String｜Number	-	-
height	按钮高度	String｜Number	-	-
color	按钮字体颜色	String	-	-
size	按钮字体大小	String｜Number	14	-
bgColor	按钮背景颜色	String	transparent	-
borderColor	按钮边框颜色	String	transparent	-
radius	按钮圆角	String｜Number	0	-
isOpacity	是否透明	Boolean	true	false
successVal	短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）	Number	0	-
keepRunning	是否保持倒计时，详见上方设置保持倒计时	Boolean	false	true
uniqueKey	组件唯一标识，用于区分多个组件的变量	String	-	-
startState	是否默认倒计时状态	Boolean	false	true
customStyle	定义需要用到的外部样式	String｜Object	-	-

CodeVerify Methods

方法名	说明
startTimer	开始倒计时
reset	结束当前正在进行中的倒计时，设置组件可以重新获取验证码的状态

CodeVerify Events

事件名	说明	回调参数
send	点击按钮触发	() => void
start	开始倒计时触发	() => void
end	倒计时结束触发	() => void
change	倒计时中触发	() => void

CodeVerify Slot

名称	说明
default	自定义显示内容

CodeVerify 验证码倒计时 ​

平台差异说明 ​

代码示例 ​

基础用法 ​

设置提示语 ​

设置保持倒计时 ​

API ​

CodeVerify Props ​

CodeVerify Methods ​

CodeVerify Events ​

CodeVerify Slot ​