CodeInput 验证码输入

该组件一般用于验证用户短信验证码的场景，也可以结合TuniaoUI的键盘组件使用

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

<view class="tn-bg-white">
<tn-verification-code-input v-model="value1"></tn-verification-code-input>
</view>

居中提示线

<view class="tn-bg-white">
<tn-verification-code-input v-model="value2" mode="middleLine"></tn-verification-code-input>
</view>

底部提示线

<view class="tn-bg-white">
<tn-verification-code-input v-model="value3" mode="bottomLine"></tn-verification-code-input>
</view>

修改验证码长度

<view class="tn-bg-white">
<tn-verification-code-input v-model="value4" :maxLength="6"></tn-verification-code-input>
</view>

使用圆点隐藏已输入

<view class="tn-bg-white">
<tn-verification-code-input v-model="value5" :dotFill="true"></tn-verification-code-input>
</view>

不带呼吸效果

<view class="tn-bg-white">
<tn-verification-code-input v-model="value6" :breathe="false"></tn-verification-code-input>
</view>

字体加粗

<view class="tn-bg-white">
<tn-verification-code-input v-model="value7" :bold="true"></tn-verification-code-input>
</view>

自定义样式

<view class="tn-bg-white">
<tn-verification-code-input v-model="value8" :fontSize="40" :inputWidth="60" activeColor="#3D7EFF"
                            inactiveColor="#9EBEFF"></tn-verification-code-input>
</view>

API

CodeInput Props

属性名	说明	类型	默认值	可选值
value	验证码的值	String/Number	''	-
maxLength	最大输入长度	Number	4	-
mode	显示模式	String	box	box 盒子 bottomLine 底部横线 middleLine 中间横线
dotFill	用圆点填充空白位置	Boolean	false	true/false
bold	字体加粗	Boolean	false	true/false
fontSize	字体大小	Number	''	-
activeColor	激活时的颜色	String	''	-
inputWidth	输入框宽度，单位rpx	Number	80	-
breathe	当前激活的item带呼吸效果	Boolean	true	true/false
focus	自动获取焦点	Boolean	false	true/false
disabledKeyboard	隐藏原生键盘，当使用自定义键盘的时候设置该参数未true即可	Boolean	false	true/false
activeColor	激活时的颜色	String	''	-
inputWidth	输入框宽度，单位rpx	Number	80	-
breathe	当前激活的item带呼吸效果	Boolean	true	true/false

CodeInput Event

事件名称	说明	回调参数
change	输入时触发	value String/Number
input	输入时触发	value String/Number
finish	达到maxlength时触发	value String/Number