你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

其它组件

验证码输入框 tmCodeInput

验证码输入框

🌶️ 示例

查看模拟效果－

示例模板

<template>
	<view>
		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b mb-8">验证码输入 tmCodeInput</tm-text>
			<tm-text color="#999999">提供了两种方式，自带输入框输入，以及配合我的keyborad键盘。</tm-text>
		</tm-sheet>

		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b mb-8">自动拉起系统键盘</tm-text>
			<tm-code-input v-model="value" @confirm="ok" gutter="4" :maxlength="6" width="88" height="88"
				:autoFocus="true"></tm-code-input>
		</tm-sheet>

		<!-- 		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b mb-12">关闭系统键盘使用组件键盘</tm-text>
			<tm-code-input place-shape="line" @click="showkey=true" @confirm="showkey = false" v-model="value" :useSysKeyborad="false" skin="fill"></tm-code-input>
		</tm-sheet>
		<tm-keyboard-number :max-len="4" v-model:modelShow="showkey" v-model="value"></tm-keyboard-number> -->
		<view style="height: 400px;"></view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value = ref("")
const ok = () => {
	uni.showToast({
		title: "验证成功",
		mask: true
	})
}

</script>

<style></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
autoFocus	boolean	false	进入时自动获取焦点，并弹出系统自带的键盘(需要useSysKeyborad=true)。
useSysKeyborad	boolean	true	是否使用系统自带的键盘。，如果为false你需要自行配置输入键盘比如使用我的keyborad键盘组件。
modelValue	string	""	当前输入的值
maxlength	number	4	最大长度
gutter	string	"16"	间距
width	string|number	"100"	验证码框的宽
height	string|number	"100"	验证码框的高
fontColor	string	""	当前输入项激活时的文字颜色同时也是高亮时的背景色。默认取全局主题
darkFontColor	string	""	暗黑时的主题色，不填写等同fontColor
fontSize	string	"42"	文字大小
round	string	"16"	圆角
bgColor	string	"#f0f0f0"	skin=fill时的背景
darkBgColor	string	"#272727"	skin=fill时的暗黑背景
borderColor	string	""	skin=outline时的边线颜色
darkBorderColor	string	""	skin=outline时的暗黑边线颜色
unBorderColor	string	"#e3e3e3"	skin=outline时的边线颜色[非激活时]
unDarkBorderColor	string	"#2c2b2c"	skin=outline时的暗黑边线颜色[非激活时]
skin	string	"outline"	-
placeShape	string	"round"	待输入时的占位形状line线型round圆形空值表示不需要占位符号

🌹 事件

事件名	参数	返回数据	描述
click	-	-	输入框点击时触发
confirm	名称：value,值,	-	自带键盘上确认或者达到指定长度位数时触发，可能会多次触发
change	名称：value,值,	-	输入时触发
update:modelValue	-	-	等同vmodel，可与我的keyborad键盘配合使用。

🌽 slot插槽

插槽名	数据	描述

🥗 ref方法

方法名	参数	返回值	描述