NumberKeyboard - Vant 4

NumberKeyboard

Intro

The NumberKeyboard component can be used with PasswordInput component or custom input box components.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { NumberKeyboard } from'vant'; const app = createApp(); app.use(NumberKeyboard);

Usage

Default Keyboard

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const show = ref(true); constonInput = (value) => showToast(value); constonDelete = () => showToast('delete'); return { show, onInput, onDelete, }; }, };

Keyboard With Sidebar

IdNumber Keyboard

Use extra-key prop to set the content of bottom left button.

Keyboard With Title

Use title prop to set keyboard title.

Multiple ExtraKey

Random Key Order

Use random-key-order prop to shuffle the order of keys.

Bind Value

import { ref } from'vue'; exportdefault { setup() { const show = ref(true); const value = ref(''); return { show, value, }; }, };

API

Props

Attribute	Description	Type	Default
v-model	Current value	string	-
show	Whether to show keyboard	boolean	-
title	Keyboard title	string	-
theme	Keyboard theme, can be set to custom	string	default
maxlength	Value maxlength	*number	string*
transition	Whether to show transition animation	boolean	true
z-index	Keyboard z-index	*number	string*
extra-key	Content of bottom left key	*string	string[]*
close-button-text	Close button text	string	-
delete-button-text	Delete button text	string	Delete Icon
close-button-loading	Whether to show loading close button in custom theme	boolean	false
show-delete-key	Whether to show delete button	boolean	true
blur-on-close	Whether to emit blur event when clicking close button	boolean	true
hide-on-click-outside	Whether to hide keyboard when outside is clicked	boolean	true
teleport	Specifies a target element where NumberKeyboard will be mounted	*string	Element*
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	true
random-key-order	Whether to shuffle the order of keys	boolean	false

Events

Event	Description	Arguments
input	Emitted when a key is pressed	key: string
delete	Emitted when the delete key is pressed	-
close	Emitted when the close button is clicked	-
blur	Emitted when the close button is clicked or the keyboard is blurred	-
show	Emitted when keyboard is fully displayed	-
hide	Emitted when keyboard is fully hidden	-

Slots

Name	Description
delete	Custom delete key content
extra-key	Custom extra key content
title-left	Custom title left content

Types

The component exports the following type definitions:

importtype { NumberKeyboardProps, NumberKeyboardTheme } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-number-keyboard-background	var(--van-gray-2)	-
--van-number-keyboard-key-height	48px	-
--van-number-keyboard-key-font-size	28px	-
--van-number-keyboard-key-active-color	var(--van-gray-3)	-
--van-number-keyboard-key-background	var(--van-white)	-
--van-number-keyboard-delete-font-size	var(--van-font-size-lg)	-
--van-number-keyboard-title-color	var(--van-gray-7)	-
--van-number-keyboard-title-height	34px	-
--van-number-keyboard-title-font-size	var(--van-font-size-lg)	-
--van-number-keyboard-close-padding	0 var(--van-padding-md)	-
--van-number-keyboard-close-color	var(--van-primary-color)	-
--van-number-keyboard-close-font-size	var(--van-font-size-md)	-
--van-number-keyboard-button-text-color	var(--van-white)	-
--van-number-keyboard-button-background	var(--van-primary-color)	-
--van-number-keyboard-z-index	100	-