介绍

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

代码演示

数字键盘

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

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

带小数点的数字键盘

允许输入小数。

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

身份证键盘

由 0-9 和 X 组成。

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

随机数字键盘

展示乱序的数字按键。

vue ts

<template>
  <s-list>
    <s-list-item>
      <s-keyboard ref="keyboard" type="random" />
    </s-list-item>
    <s-list-item title="打乱" arrow hover @click="keyboardRef?.shuffle()" />
  </s-list>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const keyboardRef = useTemplateRef('keyboard')
</script>

vue js

<template>
  <s-list>
    <s-list-item>
      <s-keyboard ref="keyboard" type="random" />
    </s-list-item>
    <s-list-item title="打乱" arrow hover @click="keyboardRef?.shuffle()" />
  </s-list>
</template>

<script setup lang="js">
import { useTemplateRef } from 'vue'
const keyboardRef = useTemplateRef('keyboard')
</script>

车牌号键盘

用于输入车牌号。

vue ts

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

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

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

vue js

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

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

API

KeyboardProps

属性	描述	类型	默认值
type	键盘类型	'number' | 'digit' | 'idcard' | 'random' | 'plate'	'number'
mode	'plate'键盘时的模式	'chinese' | 'english'	'chinese'
disabled-key	禁用按键的回调函数	(key: string) => boolean	-

KeyboardEmits

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

KeyBoardExpose

属性	描述	类型
shuffle	重新打乱随机键盘按键	() => void

主题定制

样式变量

CSS 变量	值
--s-keyboard-bg	var(--s-gray-200)
--s-keyboard-padding	6px
--s-keyboard-key-gap	6px
--s-keyboard-key-color	var(--s-text-color-primary)
--s-keyboard-key-bg	var(--s-white)
--s-keyboard-key-bg-active	var(--s-gray-300)
--s-keyboard-key-height	var(--s-size-4xl)
--s-keyboard-key-border-radius	var(--s-border-radius)
--s-keyboard-key-font-size	var(--s-font-size-xl)
--s-keyboard-key-plate-height	var(--s-size-3xl)
--s-keyboard-key-plate-border-radius	var(--s-border-radius-sm)
--s-keyboard-key-plate-font-size	var(--s-font-size)
--s-keyboard-key-plate-backspace-font-size	var(--s-size)
--s-keyboard-key-plate-bg	var(--s-gray-300)
--s-keyboard-key-plate-bg-active	var(--s-gray-400)