T-UVUE-UI1.0.0

Appearance

t-code-input 验证码输入 ​

用于输入验证码的组件，支持配置输入框类型、类名、最大长度、是否显示为点、点的大小和符号、显示模式、预置值和是否自动聚焦。

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<template>
	<t-page title="验证码输入">
		<t-card title="CodeInput" class="mtlr.20"
			sub-title="组件用于输入验证码的高交互性组件，具有以下功能亮点：支持自定义样式、光标动画效果、显示或隐藏输入字符，适用于各种验证场景。使用场景包括登录、注册、身份验证等需要用户输入验证码的界面"></t-card>
		<introduction title="基础功能" v-if="area==1">
			<t-code-input class="mb.20" v-model="codeNumber1"></t-code-input>
			<!-- <t-code-input class="mb.20" v-model="codeNumber2" type="info"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber3" type="primary"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber4" type="success"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber5" type="error"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber6" type="warning"></t-code-input> -->
		</introduction>
		<introduction title="横线模式" v-if="area==2">
			<t-code-input class="mb.20" mode="line"></t-code-input>
			<t-code-input class="mb.20" mode="line" type="primary"></t-code-input>
			<t-code-input class="mb.20" mode="line" type="success"></t-code-input>
			<t-code-input class="mb.20" mode="line" type="error"></t-code-input>
			<t-code-input class="mb.20" mode="line" type="warning"></t-code-input>
		</introduction>
		<introduction title="点模式" v-if="area==3">
			<t-code-input class="mb.20" :dot="true" v-model="codeNumber1"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber1" type="primary" :dot="true" dotSymbol="*"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber1" type="success" :dot="true"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber1" type="error" :dot="true"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber1" type="warning" :dot="true"></t-code-input>
		</introduction>
		<introduction title="默认值" v-if="area==4">
			<t-code-input class="mb.20" v-model="codeNumber6"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber6" type="primary"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber6" type="success"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber6" type="error"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber6" type="warning"></t-code-input>
		</introduction>
		<introduction title="设置长度" v-if="area==5">
			<t-code-input class="mb.20" v-model="codeNumber1" :maxlength="2"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber1" :maxlength="3" type="primary"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber1" :maxlength="4" type="success"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber1" :maxlength="5" type="error"></t-code-input>
			<t-code-input class="mb.20" v-model="codeNumber1" :maxlength="7" type="warning"></t-code-input>
		</introduction>
		<t-row class='ffww-tdb-tdr-tdp-mlrt.30'>
			<t-button type="p" class="mrb.30" size="small" @click="area=1">基础功能</t-button>
			<t-button type="e" class="mrb.30" size="small" @click="area=2">横线模式</t-button>
			<t-button type="s" class="mrb.30" size="small" @click="area=3">点模式</t-button>
			<t-button type="w" class="mrb.30" size="small" @click="area=4">默认值</t-button>
			<t-button type="p" class="mrbs.30" size="small" @click="area=5">设置长度</t-button>
		</t-row>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				area: 1,
				codeNumber1: '',
				codeNumber2: '',
				codeNumber3: '',
				codeNumber4: '',
				codeNumber5: '',
				codeNumber6: '125231',
			};
		}
	}
</script>

Props ​

名称描述类型默认值可选值
type输入框类型String'p''text', 'number'
editBoxClass输入框的额外类名String''-
maxlength输入框最大长度Number6-
dot是否将输入内容显示为点Booleanfalsetrue, false
dotSize点的大小String'15rpx'-
dotSymbol点的符号String''-
mode显示模式，可选值为 'box'（盒子模式）或 'line'（底部横线模式）String'box''box', 'line'
modelValue输入框的预置值String''-
autoFocus是否自动聚焦Booleanfalsetrue, false

Events ​

事件名描述回调参数版本
update:modelValue绑定值更新时触发(value: String)-
input输入框内容变化时触发(event: InputEvent)-

Methods ​

名称描述参数返回值
reset重置输入框的值(value: any)-
getValue获取当前输入框的值-any