• Vant React

NumberKeyboard 数字键盘

介绍

虚拟数字键盘，可以配合密码输入框组件或自定义的输入框组件使用。

引入

import { NumberKeyboard } from "@taroify/core";

代码演示

默认样式

数字键盘提供了 onKeyPress、onBackspace、onHide 事件，分别对应输入内容、删除内容和隐藏键盘。

function BasicNumberKeyboard(props: KeyboardProps) {
  const { keyboard, onKeyboard, onKeyPress } = props
  return (
    <>
      <Cell
        clickable
        title="弹出默认键盘"
        rightIcon={<ArrowRight />}
        onClick={() => onKeyboard?.("basic")}
      />
      <NumberKeyboard
        open={keyboard === "basic"}
        onKeyPress={onKeyPress}
        onHide={() => onKeyboard?.("")}
      />
    </>
  )
}

点击键盘以外的区域时，键盘会自动收起，通过阻止元素上的 touchstart 事件冒泡可以避免键盘收起。

带右侧栏的键盘

使用 NumberKeyboard.Sidebar 子组件可以用来展示键盘的右侧栏，常用于输入金额的场景。

function SidebarNumberKeyboard(props: KeyboardProps) {
  const { keyboard, onKeyboard, onKeyPress } = props
  return (
    <>
      <Cell
        clickable
        title="弹出带右侧栏的键盘"
        rightIcon={<ArrowRight />}
        onClick={() => onKeyboard?.("sidebar")}
      />
      <NumberKeyboard
        open={keyboard === "sidebar"}
        extraKey={[undefined, "."]}
        onKeyPress={onKeyPress}
        onHide={() => onKeyboard?.("")}
      >
        <NumberKeyboard.Sidebar>
          <NumberKeyboard.Key size="large" code="backspace" />
          <NumberKeyboard.Key size="large" code="keyboard-hide" color="blue">
            完成
          </NumberKeyboard.Key>
        </NumberKeyboard.Sidebar>
      </NumberKeyboard>
    </>
  )
}

身份证号键盘

通过 extraKey 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 extraKey 设置为 X。

function IdCardNumberKeyboard(props: KeyboardProps) {
  const { keyboard, onKeyboard, onKeyPress } = props
  return (
    <>
      <Cell
        clickable
        title="弹出身份证号键盘"
        rightIcon={<ArrowRight />}
        onClick={() => onKeyboard?.("idCard")}
      />
      <NumberKeyboard
        open={keyboard === "idcard"}
        extraKey="X"
        onKeyPress={onKeyPress}
        onHide={() => onKeyboard?.("")}
      >
        <NumberKeyboard.Header>
          <NumberKeyboard.Button>完成</NumberKeyboard.Button>
        </NumberKeyboard.Header>
      </NumberKeyboard>
    </>
  )
}

键盘标题

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

function TitleNumberKeyboard(props: KeyboardProps) {
  const { keyboard, onKeyboard, onKeyPress } = props
  return (
    <>
      <Cell
        clickable
        title="弹出身份证号键盘"
        rightIcon={<ArrowRight />}
        onClick={() => onKeyboard?.("title")}
      />
      <NumberKeyboard
        open={keyboard === "title"}
        title="键盘标题"
        extraKey="."
        onKeyPress={onKeyPress}
        onHide={() => onKeyboard?.("")}
      >
        <NumberKeyboard.Header>
          <NumberKeyboard.Button>完成</NumberKeyboard.Button>
        </NumberKeyboard.Header>
      </NumberKeyboard>
    </>
  )
}

配置多个按键

将 extraKey 配置成数组，可以实现配置多个按键。

function NumberKeyboardWithKeys(props: KeyboardProps) {
  const { keyboard, onKeyboard, onKeyPress } = props
  return (
    <>
      <Cell
        clickable
        title="弹出配置多个按键的键盘"
        rightIcon={<ArrowRight />}
        onClick={() => onKeyboard?.("keys")}
      />
      <NumberKeyboard
        open={keyboard === "keys"}
        extraKey={["00", "."]}
        onKeyPress={onKeyPress}
        onHide={() => onKeyboard?.("")}
      >
        <NumberKeyboard.Sidebar>
          <NumberKeyboard.Key size="large" code="backspace" />
          <NumberKeyboard.Key size="large" code="keyboard-hide" color="blue">
            完成
          </NumberKeyboard.Key>
        </NumberKeyboard.Sidebar>
      </NumberKeyboard>
    </>
  )
}

随机数字键盘

通过 random 属性可以随机排序数字键盘，常用于安全等级较高的场景。

function RandomNumberKeyboard(props: KeyboardProps) {
  const { keyboard, onKeyboard, onKeyPress } = props
  return (
    <>
      <Cell
        clickable
        title="弹出配置随机数字的键盘"
        rightIcon={<ArrowRight />}
        onClick={() => onKeyboard?.("random")}
      />
      <NumberKeyboard
        open={keyboard === "random"}
        random
        onKeyPress={onKeyPress}
        onHide={() => onKeyboard?.("")}
      />
    </>
  )
}

API

NumberKeyboard Props

参数 说明 类型 默认值
value 当前输入值 string -
open 是否显示键盘 boolean -
title 键盘标题 string -
maxlength 输入值最大长度 number | string -
transition 是否开启过场动画 boolean true
extraKey 底部额外按键的内容 ReactNode | [ReactNode, ReactNode] ''
random 是否将通过随机顺序展示按键 boolean false

NumberKeyboard Events

事件名 说明 回调参数
onChange 点击按键时触发 key: 按键内容
onBackspace 点击删除键时触发 -
onHide 点击关闭按钮时触发 -

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
number-keyboard-z-index 100 -
number-keyboard-background-color var(—gray-2) -
number-keyboard-with-title-border-radius 20px * $hd 20px * $hd 0 0 -
number-keyboard-header-color var(—gray-7) -
number-keyboard-header-padding-top 6px * $hd -
number-keyboard-header-height 34px * $hd -
number-keyboard-header-font-size var(—font-size-lg) -
number-keyboard-key-height 48px * $hd -
number-keyboard-key-font-size 28px * $hd -
number-keyboard-key-background-color var(—white, $white) -
number-keyboard-key-border-radius var(—border-radius-lg) -
number-keyboard-key-line-height 1.5 -
number-keyboard-key-active-background-color var(—gray-3) -
number-keyboard-key-active-opacity var(—active-opacity) -
number-keyboard-large-key-font-size var(—font-size-lg) -
number-keyboard-hide-padding 0 var(—padding-md) -
number-keyboard-hide-font-size 24px * $hd -
number-keyboard-hide-color var(—text-link-color) -
number-keyboard-hide-active-opacity var(—number-keyboard-key-active-opacity) -
number-keyboard-backspace-font-size 22px * $hd -
number-keyboard-button-color var(—white) -
number-keyboard-button-background-color var(—primary-color) -