# t-code-input

CodeInput 验证码输入

t-code-input 组件介绍

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

t-code-input 平台兼容

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

t-code-input 基础用法

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

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="CodeInput"
				class="mtlr-10"
				sub-title="组件用于输入验证码的高交互性组件，具有以下功能亮点：支持自定义样式、光标动画效果、显示或隐藏输入字符，适用于各种验证场景。使用场景包括登录、注册、身份验证等需要用户输入验证码的界面"></t-card>
		<introduction title="基础功能">
			<t-code-input class="r-10 p-10"
						  :autoFocus="true"
						  v-model="codeNumber1"
						  type="primary"></t-code-input>
		</introduction>
		<introduction title="自定义symbol">
			<t-code-input v-model="codeNumber1"
						  type="primary"
						  dotSymbol="🍑"></t-code-input>
			<t-code-input v-model="codeNumber1"
						  type="error"
						  item-box-class="r-0! brw-0 btw-0 blw-0 mr-10"
						  dotSymbol="🌶️"></t-code-input>
		</introduction>
		<t-lazy>
			<introduction title="光标样式">
				<t-code-input class="r-10 p-10"
							  :maxlength="4"
							  item-box-class="fv"
							  cursor-class="twhr-10!"
							  type="primary"></t-code-input>
			</introduction>
		</t-lazy>
		<t-lazy>
			<introduction title="基础功能-effect-禁用展示">
				<t-code-input class="mb-10 r-10 p-10"
							  size="large"
							  :maxlength="4"
							  item-box-class="fv"
							  :disabled="true"
							  cursorClass="w-15 h-5"
							  type="primary"
							  effect="normal"></t-code-input>
			</introduction>
		</t-lazy>
		<t-lazy>
			<introduction title="默认值">
				<t-code-input v-model="codeNumber6"
							  type="primary"></t-code-input>
			</introduction>
		</t-lazy>
		<t-lazy>
			<introduction title="设置长度">
				<t-code-input v-model="codeNumber1"
							  :maxlength="4"
							  type="success"></t-code-input>
			</introduction>
		</t-lazy>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const codeNumber1 = ref('')
	const codeNumber2 = ref('')
	const codeNumber3 = ref('')
	const codeNumber4 = ref('')
	const codeNumber5 = ref('')
	const codeNumber6 = ref('125') // 设置默认值
</script>

t-code-input 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'

t-code-input 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	未输入状态项样式类