vant/src/number-keyboard

NumberKeyboard

Intro

The numberkeyboard component can be used with PasswordInput components 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

<van-cell @touchstart.stop="show = true">Show Keyboard</van-cell>
<van-number-keyboard
  :show="show"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const show = ref(true);
    const onInput = (value) => Toast(value);
    const onDelete = () => Toast('delete');

    return {
      show,
      onInput,
      onDelete,
    };
  },
};

Keyboard With Sidebar

<van-number-keyboard
  :show="show"
  theme="custom"
  extra-key="."
  close-button-text="Close"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

IdNumber Keyboard

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

<van-cell plain type="primary" @touchstart.stop="show = true">
  Show IdNumber Keyboard
</van-cell>

<van-number-keyboard
  :show="show"
  extra-key="X"
  close-button-text="Close"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

Keyboard With Title

Use title prop to set keyboard title.

<van-cell plain type="primary" @touchstart.stop="show = true">
  Show Keyboard With Title
</van-cell>
<van-number-keyboard
  :show="show"
  title="Keyboard Title"
  extra-key="."
  close-button-text="Close"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

Multiple ExtraKey

<van-cell plain type="primary" @touchstart.stop="show = true">
  Show Keyboard With Multiple ExtraKey
</van-cell>
<van-number-keyboard
  :show="show"
  :extra-key="['00', '.']"
  close-button-text="Close"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

Random Key Order

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

<van-cell @touchstart.stop="show = true">
  Show Keyboard With Random Key Order
</van-cell>
<van-number-keyboard
  :show="show"
  random-key-order
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

Bind Value

<van-field v-model="value" readonly clickable @touchstart.stop="show = true" />
<van-number-keyboard
  v-model="value"
  :show="show"
  :maxlength="6"
  @blur="show = false"
/>

import { ref } from 'vue';

export default {
  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	100
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 v3.0.6	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	Return the mount node for NumberKeyboard	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 keydown	key: Content of the key
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 blured	-
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

Less Variables

How to use: Custom Theme.

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