# t-code

Code 代码

t-code 组件介绍

t-code 用于获取验证码场景，提供倒计时功能，通常用于发送短信验证码。支持自定义倒计时时间、提示文本，倒计时期间按钮自动禁用。

t-code 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-code 基础用法

基础用法参考 demo/code/code.uvue，点击按钮开始倒计时，倒计时期间按钮禁用。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="Code 验证码"
				class="mltr-15"
				sub-title="获取验证码组件用于在表单中提供一种倒计时功能，通常用于发送短信验证码的场景。它的功能亮点包括：开始倒计时后显示剩余时间，倒计时结束后允许重新获取验证码。使用场景包括：注册、登录、找回密码等需要验证用户手机号的场合。组件还提供了自定义边框、大小和提示文本的选项。"></t-card>
		<introduction title="通过方法控制">
			<t-col class="mb-15 r-10 p-10">
				<t-code class="mb-10 s-17 sfwb w-100% slh-25"
						type="primary"
						ref="smscode"></t-code>
				<t-row>
					<t-button class="f"
							  @click="codestop"
							  type="error">结束</t-button>
					<t-button class="f ml-15"
							  type="primary"
							  @click="codestart">开始</t-button>
				</t-row>
			</t-col>
		</introduction>
		<introduction title="基础样式+主题+size">
			<t-row class='fww r-10 p-10 pltr-8'>
				<t-code size="large"
						class="mrb-8"
						type="success"></t-code>
				<t-code size="medium"
						class="mrb-8"
						type="error"></t-code>
				<t-code size="small"
						class="mrb-8"
						type="primary"></t-code>
				<t-code size="mini"
						class="mrb-8"
						type="warning"></t-code>
			</t-row>
		</introduction>
		<introduction title="设置宽高文字大小">
			<t-row class='fww'>
				<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='fww'>
				<t-code class="w-100 h-40 slh-40 p-0 mrb-8 s-15"></t-code>
				<t-code type="error"
						class="s-25 mrb-8"></t-code>
				<t-code type="primary"
						class="c-red mrb-8"></t-code>
				<t-code type="warning"
						class="s-20"></t-code>
			</t-row>
		</introduction>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	// @tui-autocss-include
	const sty = 'w-125 h-40 slh-40 mrb-8 p-0 plr-5 s-18'
	const smscode = ref<ComponentPublicInstance | null>(null)

	const codestart = () => {
		smscode.value?.$callMethod('start')
	}

	const codestop = () => {
		smscode.value?.$callMethod('stops')
	}

	const test = () => {
		// 空函数
	}

	const start = () => {
		console.log('倒计时开始')
	}

	const end = () => {
		console.log('倒计时结束')
	}

	const change = (e) => {
		console.log(e)
	}
</script>

t-code Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'mini'
seconds	倒计时的秒数	number	60
startText	尚未开始时的提示文本	string	'获取验证码'
changeText	倒计时中的提示文本	string	'后重新获取'
endText	倒计时结束时的提示文本	string	'重新获取'

t-code Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-
start	倒计时开始时触发	-
change	倒计时进行中触发	number（剩余秒数）
end	倒计时结束时触发	number（0）

Methods

组件通过 defineExpose 暴露了以下实例方法：

方法名	说明
start	手动开始倒计时
stops	手动停止倒计时