该组件一般用于验证用户短信验证码的场景，也可以结合mView的键盘组件使用
平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 |
|---|
| √ | × | √ | √ |
基本使用
- 通过
mode参数模式，可取如下值： box(默认)-输入位置位一个方框line-底部显示一条横线
<m-code-input v-model="value" />
横线模式
<m-code-input mode="line" v-model="value" />
设置长度
<m-code-input maxlength="4" v-model="value" />
用"●"替代输入内容
<m-code-input dot v-model="value" />
API
Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|
| adjustPosition | 键盘弹起时，是否自动上推页面 | Boolean | true | false |
| maxlength | 输入字符个数 | Number | String | 6 | - |
| dot | 是否用圆点填充 | Boolean | false | true |
| mode | 模式选择，见上方"基本使用"说明 | String | box | line |
| hairline | 是否细边框 | Boolean | true | false |
| space | 字符间的距离 | Number | String | 10 | - |
| focus | 是否自动获取焦点 | Boolean | false | true |
| bold | 字体和输入横线是否加粗 | Boolean | false | true |
| color | 字体颜色 | String | color['m-content-color'] | - |
| fontSize | 字体大小，单位px，注意：dot模式无效。 | Number | String | 18 | - |
| size | 输入框的大小，宽等于高 | Number | String | 35 | - |
| disabledKeyboard | 禁止点击输入框唤起系统键盘 | Boolean | false | true |
| borderColor | 边框和线条颜色 | String | #c9cacc | - |
| disabledDot | 是否禁止输入"."符号 | Boolean | true | false |
Event
| 事件名 | 说明 | 回调参数 |
|---|
| change | 输入内容发生改变时触发 | value：当前输入的值 |
| finish | 输入字符个数达maxlength值时触发 | value：当前输入的值 |