主题
DigitalKeyboard 数字键盘
提供数字、小数点、退格、确认和备用键；输入内容由页面维护。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 自定义数字键盘 -->
<fui-digital-keyboard :show="showKeyboard" decimal @click="handleDigit"
@backspace="handleBackspace" @confirm="showKeyboard = false" />页面需声明 showKeyboard、handleDigit 和 handleBackspace，按返回的按键值更新输入内容。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| show | Boolean | 是否显示键盘 | false |
| text | String | 确认按钮文字 | 确定 |
| background | String | 确认按钮背景色 | #465CFF |
| color | String | 确认按钮文字颜色 | #fff |
| size | Number / String | 确认按钮字号，单位 rpx | 32 |
| fontWeight | Number / String | 确认按钮字重 | 600 |
| disabled | Boolean | 是否禁用确认按钮 | false |
| name | String | 退格图标名，如 backspace-fill、backspace | backspace-fill |
| decimal | Boolean | 是否显示小数点 | false |
| spareKey | String | 备用键文字 | - |
| spareSize | Number / String | 备用键字号，单位 rpx | 32 |
| theme | String | 主题：light 或 dark | light |
| zIndex | Number / String | 层级，nvue 不支持 | 1001 |
| safeArea | Boolean | 是否适配底部安全区 | true |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| click | 点击数字或小数点 | { value } |
| backspace | 点击退格键 | {} |
| confirm | 点击确认按钮 | {} |
| spare | 点击备用键 | { value } |
非 nvue 的默认主色由 --fui-color-primary 控制；nvue 中元素顺序影响层级。
插槽
| 插槽 | 说明 |
|---|---|
| default | 键盘上方的自定义内容 |