t-code-input

CodeInput 验证码输入

组件介绍

t-code-input 用于验证码输入场景，提供高交互性的输入体验，支持自定义样式、光标动画效果、显示或隐藏输入字符。适用于登录、注册、身份验证等需要输入验证码的界面。

平台兼容

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

基础用法

基础用法参考 demo/code-input/code-input.uvue，通过 v-model 双向绑定输入值。

<template>
  <view class="code-input-demo">
    <!-- 基础用法 -->
    <t-code-input v-model="code1" :maxlength="6"></t-code-input>
    
    <!-- 密码模式 -->
    <t-code-input v-model="code2" :maxlength="6" dotSymbol="•"></t-code-input>
    
    <!-- 数字键盘 -->
    <t-code-input v-model="code3" :maxlength="4" inputType="number"></t-code-input>
    
    <!-- 自定义样式 -->
    <t-code-input 
      v-model="code4" 
      :maxlength="6"
      type="primary"
      activeItemItemBoxClass="b-2px,s,#2979ff"
      inactiveItemItemBoxClass="b-2px,s,#e0e0e0">
    </t-code-input>
  </view>
</template>

<script setup>
const code1 = ref('');
const code2 = ref('');
const code3 = ref('');
const code4 = ref('');
</script>

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

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
maxlength	最大输入长度	number	6
modelValue	输入的值	string	''
autoFocus	是否自动获取焦点	boolean	false
dotSymbol	输入字符的替换占位字符（如密码模式）	string	''
dotSymbolClass	替换占位字符的样式类	string	''
inputType	输入框类型，可选 text、number、idcard、digit、tel、safe-password、nickname	string	'text'
editBoxClass	编辑框样式类	string	''
cursorClass	光标样式类	string	''
textClass	文本样式类	string	''
itemBoxClass	子盒子样式类	string	''
activeItemItemBoxClass	当前输入项的盒子样式类	string	''
inactiveItemItemBoxClass	未输入状态项的盒子样式类	string	'b-2px,s,#ccc'

Events

事件名	说明	回调参数
update:modelValue	值更新时触发	string
change	输入框值变化时触发	string
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

外部类

类名	说明
edit-box-class	编辑框样式类
dot-symbol-class	替换占位字符样式类
cursor-class	光标样式类
text-class	文本样式类
item-box-class	子盒子样式类
active-item-item-box-class	当前输入项样式类
inactive-item-item-box-class	未输入状态项样式类