VerificationCode 验证码倒计时

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

平台差异说明

基本使用

通过ref获取组件对象，再执行后面的操作，见下方示例。

1. 通过seconds设置需要倒计的秒数(默认60)
2. 通过ref调用组件内部的start方法，开始倒计时
3. 通过监听change事件(从开始到结束之间，每秒触发一次)获得提示的文字，可能值如”获取验证码|12秒后重新获取|重新获取”，可以自定义

注意：用户可能在倒计时的过程中点击获取验证码的按钮，组件内部提供了通过ref获取的canGetCode变量，在倒计时 过程中，该值为false，如果为false应该给予提示并不要再次向后端请求验证码，如果为true，则为获取验证码 之前，或者倒计结束之后，可以再次向后端请求验证码。

以下为完整示例，见如下：

<template>
    <view class="wrap">
        <u-toast ref="uToast"></u-toast>
        <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
        @change="codeChange"></u-verification-code>
        <u-button @tap="getCode">{{tips}}</u-button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                tips: '',
                // refCode: null,
                seconds: 10,
            }
        },
        onReady() {
            // 注意这里为错误示例，目前微信小程序最新稳定版开发工具如此
            // 赋值会报错，很诡异，其他端无此问题
            // this.refCode = this.$refs.uCode;
        },
        methods: {
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
                if(this.$refs.uCode.canGetCode) {
                    // 模拟向后端请求验证码
                    uni.showLoading({
                        title: '正在获取验证码'
                    })
                    setTimeout(() => {
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        this.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    }, 2000);
                } else {
                    this.$u.toast('倒计时结束后再发送');
                }
            },
            end() {
                this.$u.toast('倒计时结束');
            },
            start() {
                this.$u.toast('倒计时开始');
            }
        }
    }
</script>
<style lang="scss" scoped>
    .wrap {
        padding: 24rpx;
    }
</style>

自定义提示语

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

• 获取前，参数为start-text，默认值为”获取验证码”
• 倒计时期间，参数为change-text，默认为”X秒重新获取”，这里的”x”(大小写均可)，将会被倒计的秒数替代
• 倒计时结束，参数为end-text，默认值为”重新获取”

保持倒计时

一般情况下，在H5刷新浏览器，或者各端返回再进入时，倒计时会消失，导致用户可以再次尝试获取验证码，虽然后端还会对此进行进一步的判断。
对于这种情况，uView给出了一个keep-running参数(默认为false)，为true的时候，即使刷新浏览器，或者返回上一个页面， 倒计时依然会继续(如果还在倒计时间内的话)。

API

Props

Methods

需要通过ref获取验证码组件才能调用，见上方”基本使用”说明

Event