Code 验证码输入框 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Code 验证码输入框

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

# 基本使用

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

通过seconds设置需要倒计的秒数(默认60)
通过ref调用组件内部的start方法，开始倒计时
通过监听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>
✅ Copy success!

# 自定义提示语

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

获取前，参数为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	true
uniqueKey	多个组件之间继续倒计时的区分`key`，见上方说明	string	''	-

# Methods

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

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

# Event

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

# Expose

名称	类型	说明
canGetCode	() => boolean	是否可以获取验证码的状态，为`true`时可以获取验证码，为`false`时表示正在倒计时中
start	() => void	开始倒计时的方法
reset	() => void	重置倒计时的方法，设置组件为可以重新获取验证码的状态

# 组件实例类型

通过ref获取的组件实例类型定义，这些属性和方法通过defineExpose暴露给父组件使用：

使用示例：

import { ref } from 'vue'

// 定义组件引用
const uCodeRef = ref<UnCodeComponentPublicInstance | null>(null)

// 使用组件方法
const getCode = () => {
    if (uCodeRef.value != null && uCodeRef.value.canGetCode) {
        uCodeRef.value.start()
    }
}

// 重置倒计时
const resetCode = () => {
    if (uCodeRef.value != null) {
        uCodeRef.value.reset()
    }
}
✅ Copy success!

← Upload 上传 Input 输入框 →