NumberKeyBoard 数字键盘

介绍

数字键盘，一般用于有安全需求下的数字输入，如金额、密码、验证码输入等场景。

导入

import NumberKeyBoard from '@/components/keyboard/NumberKeyBoard.vue'

用法

基础用法

通过 v-model:show 控制数字键盘的显示和隐藏。

<template>
  <view>
    <Button @click="show = true">打开键盘</Button>
    <NumberKeyBoard
      v-model:show="show"
      @input="onInput"
      @delete="onDelete"
      @blur="show = false"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
const text = ref('');

function onInput(value) {
  text.value += value;
}

function onDelete() {
  text.value = text.value.substring(0, text.value.length - 1);
}
</script>

带右侧栏键盘

通过 showSideButtons 属性显示右侧栏，右侧栏包含完成和删除按钮。

<template>
  <view>
    <Button @click="show = true">打开带右侧栏的键盘</Button>
    <NumberKeyBoard
      v-model:show="show"
      showSideButtons
      @input="onInput"
      @delete="onDelete"
      @blur="show = false"
    />
  </view>
</template>

带标题键盘

通过 title 属性设置键盘标题。

<template>
  <view>
    <Button @click="show = true">打开带标题的键盘</Button>
    <NumberKeyBoard
      v-model:show="show"
      title="请输入号码"
      @input="onInput"
      @delete="onDelete"
    />
  </view>
</template>

身份证号键盘

通过 extraKeys 属性添加身份证号所需的 'X' 按键。

<template>
  <view>
    <Button @click="show = true">打开身份证号键盘</Button>
    <NumberKeyBoard
      v-model:show="show"
      :extraKeys="[ { key: 'X', order: 9, replace: true } ]"
      @input="onInput"
      @delete="onDelete"
    />
  </view>
</template>

自定义按键键盘

通过 extraKeys 和 sideKeys 配置自定义按键和侧边按键。

<template>
  <view>
    <Button @click="show = true">打开自定义按键键盘</Button>
    <NumberKeyBoard
      v-model:show="show"
      :extraKeys="[
        { key: '0', order: 9, replace: true },
        { key: 'X', order: 10, replace: true },
        { key: 'Y', order: 11, replace: true },
        { key: 'A', order: 12, replace: true },
        { key: 'B', order: 13, replace: true },
        { key: 'C', order: 14, replace: true },
        { key: 'D', order: 15, replace: true },
        { key: 'E', order: 16, replace: true },
        { key: 'F', order: 17, replace: true },
      ]"
      :sideKeys="[
        { key: 'delete', span: 2 },
        { key: 'finish', span: 4 },
      ]"
      :keyHeight="80"
      showSideButtons
      @input="onInput"
      @delete="onDelete"
    />
  </view>
</template>

随机数字键盘

通过 keyRandomOrder 属性启用随机数字排序，提高安全性。

<template>
  <view>
    <Button @click="show = true">打开随机数字键盘</Button>
    <NumberKeyBoard
      v-model:show="show"
      keyRandomOrder
      @input="onInput"
      @delete="onDelete"
    />
  </view>
</template>

API 参考

NumberKeyBoard

数字键盘组件。

Props

名称	说明	类型	必填	默认值
v-model:show	是否显示键盘	boolean	是	-
mask	是否显示键盘遮罩，显示遮罩时无法操作下方组件	boolean	否	false
showSideButtons	是否显示侧栏	boolean	否	false
title	键盘标题	string	否	-
extraKeys	键盘额外按键数组	NumberKeyBoardExtraKey[]	否	[]
sideKeys	侧边栏按键数组	NumberKeyBoardSideKey[]	否	NumberKeyBoardSideKeys
defaultKeys	默认按键数组	string[]	否	NumberKeyBoardKeys
keyHeight	按键高度	number	否	100
keyRandomOrder	是否随机排序数字键盘	boolean	否	false
showCloseButton	是否显示关闭按钮	boolean	否	true
finishButtonText	完成按钮文字	string	否	'完成'

NumberKeyBoardSideKey

侧边栏按键对象，用于自定义键盘侧边栏按键。

名称	说明	类型	必填	默认值
key	按键文字	string	是	-
icon	按键是否显示图标，为 true 时 key 同时也是图标的名称	boolean	否	false
span	按键所占格子数	number	否	1

NumberKeyBoardExtraKey

额外按键对象，用于自定义键盘额外按键。

名称	说明	类型	必填	默认值
key	按键文字	string	是	-
span	按键所占格子数	number	否	1
height	按键所占高度格子数	number	否	1
icon	按键是否显示图标，为 true 时 key 同时也是图标的名称	boolean	否	false
order	在默认数字按键数组的哪一位插入，默认在末尾添加	number	否	-
replace	当order不为空时，是否直接替换指定位置的按键	boolean	否	false

默认按键

默认按键数组定义，可以从 NumberKeyBoardDefine 中导入。

import { 
  NumberKeyBoardKeys, // 默认按键数组
  NumberKeyBoardSideKeys  // 默认侧边栏按键数组
} from '@/components/keyboard/NumberKeyBoardDefine'

Events

名称	说明	参数
input	点击按键时触发	value: string 按键的值
delete	点击删除键时触发	-
finish	点击完成键时触发	-
blur	点击遮罩层关闭键盘时触发	-

Slots

名称	说明
top	键盘顶部内容插槽

主题变量

名称	类型	默认值	说明
NumberKeyBoardBackgroundColor	string	background.page	键盘背景颜色
NumberKeyBoardKeyBackgroundColor	string	white	按键背景颜色
NumberKeyBoardKeyFinishColor	string	primary	完成按键背景颜色
NumberKeyBoardKeyTextColor	string	black	按键文字颜色
NumberKeyBoardKeyFinishTextColor	string	white	完成按键文字颜色
NumberKeyBoardKeyPressedColor	string	pressed.white	按键按下颜色
NumberKeyBoardTitleColor	string	black	标题颜色