该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 通过
mode参数模式，可取如下值： box(默认)-输入位置位一个方框bottomLine-底部显示一条横线middleLine-中部显示一条横线
<u-code-input v-model="value"></u-code-input>
copy
#横线模式
- 通过
mode="line"可设置显示为横线模式
<u-code-input v-model="value2" mode="line"></u-code-input>
copy
#设置长度
- 通过
maxlength参数配置可输入的方框个数，如6位验证码，该值设置为6即可
<u-code-input v-model="value3" :maxlength="6"></u-code-input>
copy
#横线间距
- 通过
space可设置显示为横线模式
<u-code-input v-model="value4" :space="0" ></u-code-input>
copy
#细边框
- 通过
hairline可设置细边框
<u-code-input v-model="value5" mode="box" :space="0" :maxlength="4" hairline></u-code-input>
copy
#调整颜色
- 通过
color和borderColor可设置颜色
<u-code-input v-model="value6" hairline color="#f56c6c" borderColor="#f56c6c"></u-code-input>
copy
#用"●"替代输入内容
dot参数配置后，输入内容将不可见，用点替代，事件回调中会返回真实值
<u-code-input v-model="value5" mode="box" dot></u-code-input>
copy
#是否自动获取焦点
如果需要一打开页面，就自动弹出键盘获取焦点，请配置focus值为true，否则需要用户手动点击输入区域才能唤起键盘
<u-code-input v-model="value4" :focus="true"></u-code-input>
copy
#禁止唤起系统键盘
uView有键盘组件，如果您想结合键盘组件进行自定义的输入效果，就需要设置disabled-keyboard为true，来保证点击 输入框时不会触发系统自带的键盘，否则会造成冲突。
#事件回调
- 每当输入内容发生改变，会回调一个
change事件，内容为当前输入的字符串，如"395" - 当输入的内容长度(字符个数)达到
maxlength值后，会触发finish事件，同时也会触发change事件
<template> <view> <u-code-input @change="change" @finish="finish"></u-code-input> </view> </template> <script> export default { methods: { change(e) { console.log('内容改变，当前值为：' + e); }, finish(e) { console.log('输入结束，当前值为：' + e); }, } } </script>
