sard-uniapp/components/keyboard/README.md

sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库

---
title: Keyboard
subtitle: 键盘
group: 表单组件
---

## 介绍

虚拟键盘，用于输入支付密码、验证码、车牌号等场景。

## 引入

```js
import Keyboard from 'sard-uniapp/components/keyboard/keyboard.vue'
```

## 代码演示

### 数字键盘

展示 0-9 的数字按键和删除按键。

<<< @demo/keyboard/demo/Number.vue

### 带小数点的数字键盘

允许输入小数。

<<< @demo/keyboard/demo/Digit.vue

### 身份证键盘

由 0-9 和 X 组成。

<<< @demo/keyboard/demo/Idcard.vue

### 随机数字键盘

展示乱序的数字按键。

<<< @demo/keyboard/demo/Random.vue

### 车牌号键盘

用于输入车牌号。

<<< @demo/keyboard/demo/Plate.vue

## API

### KeyboardProps

| 属性                              | 描述                | 类型                                                     | 默认值      |
| --------------------------------- | ------------------- | -------------------------------------------------------- | ----------- |
| root-class                        | 组件根元素类名      | `string`                                                 | -           |
| root-style                        | 组件根元素样式      | `StyleValue`                                             | -           |
| type                              | 键盘类型            | `'number' \| 'digit' \| 'idcard' \| 'random' \| 'plate'` | `'number'`  |
| mode (v-model) <sup>1.24.1+</sup> | 'plate'键盘时的模式 | `'chinese' \| 'english'`                                 | `'chinese'` |
| disabled-key <sup>1.30+</sup>     | 禁用按键的回调函数  | `(key: string) => boolean`                               | -           |

### KeyboardEmits

| 事件                           | 描述                     | 类型                                     |
| ------------------------------ | ------------------------ | ---------------------------------------- |
| input                          | 可输入按键点击时触发     | `(key: string) => void`                  |
| delete                         | 点击删除按钮时触发       | `() => void`                             |
| toggle <sup>1.23.3+</sup>      | 切换车牌号的中英文时触发 | `(mode: 'chinese' \| 'english') => void` |
| update:mode <sup>1.24.1+</sup> | 切换车牌号的中英文时触发 | `(mode: 'chinese' \| 'english') => void` |

### KeyBoardExpose

| 属性                      | 描述                                 | 类型                                     |
| ------------------------- | ------------------------------------ | ---------------------------------------- |
| shuffle                   | 重新打乱随机键盘按键                 | `() => void`                             |
| toggle <sup>1.23.6+</sup> | 切换车牌号的中英文按键，可选传入mode | `(mode?: 'chinese'\| 'english') => void` |

## 主题定制

### CSS 变量

<<< @comp/keyboard/variables.scss#variables

### CSS 变量 - 暗黑模式

<<< @comp/keyboard/variables-dark.scss#variables