t-code

Code 代码

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <view class="code-demo">
    <t-input v-model="phone" placeholder="请输入手机号" type="number"></t-input>
    <t-code 
      ref="codeRef"
      :seconds="60" 
      startText="获取验证码"
      changeText="秒后重试"
      endText="重新获取"
      @start="onStart"
      @change="onChange"
      @end="onEnd">
    </t-code>
  </view>
</template>

<script setup>
const phone = ref('');
const codeRef = ref(null);

function onStart() {
  console.log('倒计时开始');
  // 这里调用发送验证码接口
}

function onChange(seconds) {
  console.log('倒计时进行中:', seconds);
}

function onEnd() {
  console.log('倒计时结束');
}

// 手动开始倒计时
defineExpose({
  startCode() {
    codeRef.value?.start();
  },
  stopCode() {
    codeRef.value?.stops();
  }
});
</script>

<style scoped>
.code-demo {
  padding: 40rpx;
}
</style>

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	'重新获取'

Events

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

Methods

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

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