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

基本使用

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

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

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

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

<template>
	<view class="wrap">
		<un-code 
			ref="uCodeRef" 
			:seconds="seconds" 
			@end="end" 
			@start="start" 
			@change="codeChange">
		</un-code>
		<un-button @tap="getCode">{{tips}}</un-button>
	</view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

// 定义响应式数据
const tips = ref('')
const seconds = ref(10)
const uCodeRef = ref<UnCodeComponentPublicInstance | null>(null)

// 定义方法
const codeChange = (text: string) => {
	tips.value = text
}

const getCode = () => {
	if (uCodeRef.value != null && uCodeRef.value.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: '正在获取验证码'
		})
		setTimeout(() => {
			uni.hideLoading();
			// 这里此提示会被start()方法中的提示覆盖
			uni.showToast({title: '验证码已发送'});
			// 通知验证码组件内部开始倒计时
			uCodeRef.value!.start();
		}, 2000);
	} else {
		uni.showToast({title: '倒计时结束后再发送'});
	}
}

const end = () => {
	uni.showToast({title: '倒计时结束'});
}

const start = () => {
	uni.showToast({title: '倒计时开始'});
}
</script>

<style lang="scss">
	.wrap {
		padding: 24rpx;
	}
</style>

自定义提示语

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

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

API

Props

参数	说明	类型	默认值
seconds	倒计时所需的秒数	number | string	60
startText	开始前的提示语，见上方说明	string	获取验证码
changeText	倒计时期间的提示语，必须带有字母"x"，见上方说明	string	X秒重新获取
endText	倒计结束的提示语，见上方说明	string	重新获取
keepRunning	是否在H5刷新或各端返回再进入时继续倒计时	boolean	false
uniqueKey	多个组件之间继续倒计时的区分key，见上方说明	string	''

Methods

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

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

Event

事件名	说明	类型
change	倒计时期间，每秒触发一次	Function
start	开始倒计时触发	Function
end	结束倒计时触发	Function

Expose

名称	类型	说明
canGetCode	是否可以获取验证码的状态，为true时可以获取验证码，为false时表示正在倒计时中	boolean