Code 倒计时

用于显示验证码倒计时的组件，支持配置边框、大小、倒计时总秒数、不同状态下的提示文本。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="获取验证码">
		<t-card title="Code 验证码" class="mltr.30"
			sub-title="获取验证码组件用于在表单中提供一种倒计时功能，通常用于发送短信验证码的场景。它的功能亮点包括：开始倒计时后显示剩余时间，倒计时结束后允许重新获取验证码。使用场景包括：注册、登录、找回密码等需要验证用户手机号的场合。组件还提供了自定义边框、大小和提示文本的选项。"></t-card>
		<introduction title="基础样式+主题">
			<t-row class='ffww'>
				<t-code class="mrb.15"></t-code>
				<t-code class="mrb.15" type="success"></t-code>
				<t-code class="mrb.15" type="error"></t-code>
				<t-code class="mrb.15" type="primary"></t-code>
				<t-code class="mrb.15" type="warning"></t-code>
			</t-row>
		</introduction>
		<introduction title="镂空">
			<t-row class='ffww'>
				<t-code effect="plain" class="mrb.15" :border="true"></t-code>
				<t-code effect="plain" class="mrb.15" type="success" :border="true"></t-code>
				<t-code effect="plain" class="mrb.15" type="error" :border="true"></t-code>
				<t-code effect="plain" class="mrb.15" type="primary" :border="true"></t-code>
				<t-code effect="plain" class="mrb.15" type="warning" :border="true"></t-code>
			</t-row>
		</introduction>
		<introduction title="不显示边框">
			<t-row class='ffww'>
				<t-code effect="plain" class="mrb.15"></t-code>
				<t-code effect="plain" class="mrb.15" type="success" :border="false"></t-code>
				<t-code effect="plain" class="mrb.15" type="error" :border="false"></t-code>
				<t-code effect="plain" class="mrb.15" type="primary" :border="false"></t-code>
				<t-code effect="plain" class="mrb.15" type="warning" :border="false"></t-code>
			</t-row>
		</introduction>
		<introduction title="设置宽高">
			<t-row class='ffww'>
				<t-code :class="sty"></t-code>
				<t-code :class="sty" type="success"></t-code>
				<t-code :class="sty" type="error"></t-code>
				<t-code :class="sty" type="primary"></t-code>
				<t-code :class="sty" type="warning"></t-code>
			</t-row>
		</introduction>

		<introduction title="样式">
			<t-row class='ffww'>
				<t-code class="w.200-h.80-slh.80-p.0-mrb.15-s.30"></t-code>
				<t-code type="success" class="code-test" radius="10rpx"></t-code>
				<t-code type="error" class="s.50-mrb.15"></t-code>
				<t-code type="primary" class="c.red-mrb.15"></t-code>
				<t-code type="warning" style="font-size: 40rpx;"></t-code>
			</t-row>
		</introduction>
		<introduction title="事件">
			<t-row class='ffww'>
				<t-code type="success" @start="start" @end="end" @change="change"></t-code>
			</t-row>
		</introduction>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				sty: 'w.200-h.80-slh.80-mrb.15-p.0-plr.10-s.35'
			};
		},
		methods: {
			test() {
				uni.navigateBack()
			},
			start() {
				console.log('倒计时开始')
			},
			end() {
				console.log('倒计时结束')
			},
			change(e : number) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	.code-test {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 150rpx;
		padding: 0rpx !important;
		font-size: 30rpx !important;
	}
</style>

Props

名称	描述	类型	默认值	可选值
border	是否显示边框	Boolean	false	true, false
size	组件大小	String	'mini'	'small', 'normal', 'large'
seconds	倒计时总秒数	Number	60	-
startText	尚未开始时提示文本	String	'获取验证码'	-
changeText	正在倒计时中的提示文本	String	'S后重新获取'	-
endText	倒计时结束时的提示文本	String	'重新获取'	-

Events

事件名	描述	回调参数	版本
start	倒计时开始时触发	-	-
change	倒计时进行中触发	(remainingSeconds: Number)	-
end	倒计时结束时触发	-	-

Methods

名称	描述	参数	返回值
setTimer	开始倒计时	-	-