介绍

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

引入

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

代码演示

数字键盘

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

<template>
  <sar-keyboard type="number" />
</template>

带小数点的数字键盘

允许输入小数。

<template>
  <sar-keyboard type="digit" />
</template>

身份证键盘

由 0-9 和 X 组成。

<template>
  <sar-keyboard type="idcard" />
</template>

随机数字键盘

展示乱序的数字按键。

<template>
  <sar-keyboard type="random" />
</template>

车牌号键盘

用于输入车牌号。

vue lang="ts"

<template>
  <sar-segmented
    v-model="mode"
    class="mx-32 mb-20"
    :options="['chinese', 'english']"
  />
  <sar-keyboard v-model:mode="mode" type="plate" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type KeyboardPlateMode } from 'sard-uniapp'

const mode = ref<KeyboardPlateMode>('chinese')
</script>

vue lang="js"

<template>
  <sar-segmented
    v-model="mode"
    class="mx-32 mb-20"
    :options="['chinese', 'english']"
  />
  <sar-keyboard v-model:mode="mode" type="plate" />
</template>

<script setup lang="js">
import { ref } from "vue";
const mode = ref("chinese");
</script>

API

KeyboardProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
type	键盘类型	'number' | 'digit' | 'idcard' | 'random' | 'plate'	'number'
mode (v-model) 1.24.1+	'plate'键盘时的模式	'chinese' | 'english'	'chinese'

KeyboardEmits

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

KeyBoardExpose

属性	描述	类型
shuffle	重新打乱随机键盘按键	() => void
toggle1.23.6+	切换车牌号的中英文按键，可选传入mode	(mode?: 'chinese'| 'english') => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-keyboard-bg: var(--sar-gray-200);
  --sar-keyboard-padding: 12rpx;

  --sar-keyboard-key-gap: 12rpx;
  --sar-keyboard-key-color: var(--sar-body-color);
  --sar-keyboard-key-bg: var(--sar-white);
  --sar-keyboard-key-active-bg: var(--sar-gray-300);

  --sar-keyboard-key-height: 96rpx;
  --sar-keyboard-key-border-radius: var(--sar-rounded);
  --sar-keyboard-key-font-size: var(--sar-text-xl);

  --sar-keyboard-key-plate-height: 80rpx;
  --sar-keyboard-key-plate-border-radius: var(--sar-rounded-sm);
  --sar-keyboard-key-plate-font-size: var(--sar-text-base);
  --sar-keyboard-key-plate-backspace-font-size: 36rpx;
  --sar-keyboard-key-plate-bg: var(--sar-gray-300);
  --sar-keyboard-key-plate-active-bg: var(--sar-gray-400);
}

CSS 变量 - 暗黑模式

@include theme-dark {
  --sar-keyboard-bg: var(--sar-gray-800);
  --sar-keyboard-key-color: var(--sar-white);
  --sar-keyboard-key-bg: var(--sar-gray-600);
  --sar-keyboard-key-active-bg: var(--sar-gray-500);
  --sar-keyboard-key-plate-bg: var(--sar-gray-600);
  --sar-keyboard-key-plate-active-bg: var(--sar-gray-500);
}