主题
SingleInput 单输入框
以多个字符格展示验证码等短文本，支持原生键盘或自定义键盘。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 输入四位验证码 -->
<fui-single-input :length="4" @complete="handleComplete" />在 handleComplete 中读取 event.detail.value。若使用自定义键盘，设置 native 为 false，并由页面将输入结果传给 value。
属性
除标明其他单位外，尺寸和间距的单位为 rpx。
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| padding | Number / String | 外层左右内边距 | 88 |
| marginTop | Number / String | 上外边距 | 0 |
| marginBottom | Number / String | 下外边距 | 0 |
| value | String | 原生键盘初始值或自定义键盘输入值 | - |
| type | String | 原生键盘输入类型 | text |
| password | Boolean | 是否密码输入 | false |
| disabled | Boolean | 是否禁用 | false |
| isFocus | Boolean | 是否获取焦点 | false |
| native | Boolean | 是否使用原生键盘 | true |
| cursor | Boolean | 是否显示光标 | true |
| cursorColor | String | 光标颜色 | #465CFF |
| cursorHeight | Number / String | 光标高度 | 60 |
| length | Number | 字符格数量，建议不超过 6 | 4 |
| width | Number / String | 字符格宽度 | 112 |
| height | Number / String | 字符格高度 | 112 |
| background | String | 字符格背景色 | transparent |
| border | Number / String | 边框类型：1 全边框、2 下边框、3 无边框 | 2 |
| borderColor | String | 边框颜色 | #eee |
| activeColor | String | 聚焦边框颜色 | #465CFF |
| borderWidth | Number / String | 边框宽度 | 4 |
| radius | Number / String | 圆角 | 0 |
| size | Number / String | 文字大小 | 48 |
| color | String | 文字颜色 | #181818 |
| fontWeight | Number / String | 文字字重 | 600 |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| complete | 输入达到指定长度 | event.detail.value |
| focus | 获取焦点 | {} |
| input | 原生键盘输入时触发 | event.detail.value |
| blur | 原生键盘失焦时触发 | event.detail.value |
| confirm | 原生键盘确认时触发 | 原始输入事件 |
平台说明
非 nvue 的默认颜色由主题变量提供。H5 焦点和键盘行为受浏览器限制，动态切换 type 时可使用 v-if 切换组件。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |