Sun uni

Code 验证码倒计时

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

平台差异说明

App(vue)	App(nvue)	H5	微信小程序
√	√	√	√

基本使用

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

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

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

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

html

<template>
  <view class="wrap">
    <su-code ref="uCode" @change="codeChange" seconds="20" change-text="XS获取" @start="disabled1 = true" @end="disabled1 = false"></su-code>
    <su-button @tap="getCode" :text="tips" type="success" size="small" :disabled="disabled1"></su-button>
  </view>
</template>

<script lang="ts" setup>
  import { ref, unref } from 'vue'

  const uCode = ref(null)
  const tips = ref('')
  const disabled1 = ref(false)

  function codeChange(text: string) {
    tips.value = text
  }
  function getCode() {
    if (unref(uCode).canGetCode) {
      // 模拟向后端请求验证码
      uni.showLoading({
        title: '正在获取验证码'
      })
      setTimeout(() => {
        uni.hideLoading()
        // 这里此提示会被this.start()方法中的提示覆盖
        uni.$u.toast('验证码已发送')
        // 通知验证码组件内部开始倒计时
        unref(uCode).start()
      }, 2000)
    } else {
      uni.$u.toast('倒计时结束后再发送')
    }
  }
</script>

自定义提示语

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

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

保持倒计时

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

注意： 如果您的一个页面或者多个页面同时使用了多个此组件，为了防止多个组件之间，保存在本地的多个继续倒计时的变量之间互相干扰，可以配置各个组件的unique-key为一个不重复的字符串，以作区分：

html

/* A.vue */
<su-code unique-key="page-a"></su-code>

/* B.vue */
<su-code unique-key="page-b"></su-code>

示例源码

点击可以查看右侧演示页面的源码

API

Props

参数	说明	类型	默认值	可选值
seconds	倒计时所需的秒数	Number \| String	60	-
start-text	开始前的提示语，见上方说明	String	获取验证码	-
change-text	倒计时期间的提示语，必须带有字母"x"，见上方说明	String	X秒重新获取	-
end-text	倒计结束的提示语，见上方说明	String	重新获取	-
keep-running	是否在H5刷新或各端返回再进入时继续倒计时	Boolean	false	true
unique-key	多个组件之间继续倒计时的区分`key`，见上方说明	String	-	-

Methods

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

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

Event

事件名	说明	回调参数	版本
change	倒计时期间，每秒触发一次	text: 当前剩余多少秒的状态，见上方说明	-
start	开始倒计时触发	-	-
end	结束倒计时触发	-	-

Code 验证码倒计时 ​

平台差异说明 ​

基本使用 ​

自定义提示语 ​

保持倒计时 ​

示例源码 ​

API ​

Props ​

Methods ​

Event ​