tui-code-input 验证码输入框 V2.2.0+ 会员组件

介绍

验证码输入框，主要用于验证码输入或密码输入等。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiCodeInput from "@/components/thorui/tui-code-input/tui-code-input.vue"
export default {
	components:{
		tuiCodeInput
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-code-input": "/components/thorui/tui-code-input/tui-code-input"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 绑定 complete 事件获取输入完成后的值。

<!--uni-app-->
<tui-code-input @complete="complete"></tui-code-input>

// data 数据 及 方法
export default {
 data() {
 	return {
 		
 	}
 },
 methods: {
 	complete(e) {
 		console.log(e.detail.value)
 	}
 }
}

<!--微信小程序-->
<tui-code-input bind:complete="complete"></tui-code-input>

// data 数据 及 方法
Page({
  data: {
   
  },
  complete(e) {
  	console.log(e.detail.value)
  }
})

// Make sure to add code blocks to your code group

仅显示底部边框/默认值/仅展示

通过 border-type 属性设置边框样式，borderWidth 属性设置边框宽度，value 属性设置默认显示内容，disabled 属性设置是否禁用修改。

<tui-code-input border-type="2" borderWidth="4" value="2023" disabled></tui-code-input>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值
gap	Number, String	组件外层左右间距，单位rpx	80
marginTop	Number, String	组件margin-top值，单位rpx	0
marginBottom	Number, String	组件margin-bottom值，单位rpx	0
value	String	初始值，不可超过length长度	-
type	String	Input输入框类型，H5不支持动态切换	text
password	Boolean	是否是密码类型输入框	false
disabled	Boolean	是否禁用输入/修改	false
isFocus	Boolean	获取焦点	false
cursor	Boolean	是否显示光标	true
cursorColor	String	光标颜色	#5677fc
cursorHeight	Number, String	光标高度，单位rpx	60
length	Number	输入框个数（内容长度）	4
width	Number, String	输入框宽度，单位rpx	108
height	Number, String	输入框高度，单位rpx	108
background	String	输入框背景色	transparent
borderType	Number, String	边框类型，可选值：1（所有边框）、2(底部边框)、3（无边框）	1
borderColor	String	边框颜色	#eaeef1
activeColor	String	边框高亮时颜色	#5677fc
borderWidth	Number, String	边框宽度，单位rpx	2
radius	Number, String	输入框圆角值，单位rpx	0
size	Number, String	输入框字体大小，单位rpx	48
color	String	输入框字体颜色	#333
fontWeight	Number, String	输入框字重	600

Events

注：uni-app端绑定事件使用@前缀，如@complete；微信小程序原生使用bind前缀，如bindcomplete

事件名	说明	回调参数
complete	输入完成时触发	event.detail = {value}
focus	获取焦点时触发	-
input	键盘输入时触发	event.detail = {value}
blur	失去焦点时触发	event.detail = {value}
confirm	点击键盘完成按钮时触发	event.detail = {value}

Methods

温馨提示：方法调用请看文档：【进阶用法 -> 组件实例方法】或者参考示例程序。

方法名	说明	传入参数
clear	清空/重置输入框	-

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码