/*! For license information please see 9963.ef4c1df4.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["9963"],{41643:function(s,n,t){"use strict";t.r(n);var a=t("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

NumberKeyboard

\n

Intro

\n

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

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(NumberKeyboard);\n
\n

Usage

\n

Default Keyboard

\n
<van-cell @touchstart.stop="show = true">Show Keyboard</van-cell>\n<van-number-keyboard\n  :show="show"\n  @blur="show = false"\n  @input="onInput"\n  @delete="onDelete"\n/>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const show = ref(true);\n    const onInput = (value) => showToast(value);\n    const onDelete = () => showToast('delete');\n\n    return {\n      show,\n      onInput,\n      onDelete,\n    };\n  },\n};\n
\n

Keyboard With Sidebar

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

IdNumber Keyboard

\n

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

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

Keyboard With Title

\n

Use title prop to set keyboard title.

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

Multiple ExtraKey

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

Random Key Order

\n

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

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

Bind Value

\n
<van-field v-model="value" readonly clickable @touchstart.stop="show = true" />\n<van-number-keyboard\n  v-model="value"\n  :show="show"\n  :maxlength="6"\n  @blur="show = false"\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const show = ref(true);\n    const value = ref('');\n    return {\n      show,\n      value,\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelCurrent valuestring-
showWhether to show keyboardboolean-
titleKeyboard titlestring-
themeKeyboard theme, can be set to customstringdefault
maxlengthValue maxlengthnumber | stringInfinity
transitionWhether to show transition animationbooleantrue
z-indexKeyboard z-indexnumber | string100
extra-keyContent of bottom left keystring | string[]\'\'
close-button-textClose button textstring-
delete-button-textDelete button textstringDelete Icon
close-button-loadingWhether to show loading close button in custom themebooleanfalse
show-delete-keyWhether to show delete buttonbooleantrue
blur-on-closeWhether to emit blur event when clicking close buttonbooleantrue
hide-on-click-outsideWhether to hide keyboard when outside is clickedbooleantrue
teleportSpecifies a target element where NumberKeyboard will be mountedstring | Element-
safe-area-inset-bottomWhether to enable bottom safe area adaptationbooleantrue
random-key-orderWhether to shuffle the order of keysbooleanfalse
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
inputEmitted when a key is pressedkey: string
deleteEmitted when the delete key is pressed-
closeEmitted when the close button is clicked-
blurEmitted when the close button is clicked or the keyboard is blurred-
showEmitted when keyboard is fully displayed-
hideEmitted when keyboard is fully hidden-
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
deleteCustom delete key content
extra-keyCustom extra key content
title-leftCustom title left content
\n

Types

\n

The component exports the following type definitions:

\n
import type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-number-keyboard-backgroundvar(--van-gray-2)-
--van-number-keyboard-key-height48px-
--van-number-keyboard-key-font-size28px-
--van-number-keyboard-key-active-colorvar(--van-gray-3)-
--van-number-keyboard-key-backgroundvar(--van-white)-
--van-number-keyboard-delete-font-sizevar(--van-font-size-lg)-
--van-number-keyboard-title-colorvar(--van-gray-7)-
--van-number-keyboard-title-height34px-
--van-number-keyboard-title-font-sizevar(--van-font-size-lg)-
--van-number-keyboard-close-padding0 var(--van-padding-md)-
--van-number-keyboard-close-colorvar(--van-primary-color)-
--van-number-keyboard-close-font-sizevar(--van-font-size-md)-
--van-number-keyboard-button-text-colorvar(--van-white)-
--van-number-keyboard-button-backgroundvar(--van-primary-color)-
--van-number-keyboard-z-index100-
\n
'},null,8,e))}}}]);