NumberKeyboard

introduce

The virtual numeric keyboard can be used with Password Input Box Component or a custom input box component.

Default style

The numeric keyboard provides input, delete, and blur events, which respectively correspond to the actions of inputting content, deleting content, and losing focus.

<z-cell title="Pop up default keyboard" is-link @click="show = true" />
<z-number-keyboard
   :show="show"
   @blur="show = false"
   @input="onInput"
   @delete="onDelete"
/>

import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const show = ref(false)
const onInput = (value: string) => toast.showToast(value)
const onDelete = () => toast.showToast('Delete')

Keyboard with right sidebar

Set the theme attribute to custom to display the right column of the keyboard, which is often used for inputting amounts.

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

ID number keyboard

The content of the key in the lower left corner can be set through the extra-key attribute. For example, when you need to enter an ID number, you can set extra-key to X.

<z-cell plain type="primary" @touchstart.stop="show = true">
   Pop up ID number keyboard
</z-cell>
<z-number-keyboard
   :show="show"
   extra-key="X"
   close-button-text="Complete"
   @blur="show = false"
   @input="onInput"
   @delete="onDelete"
/>

Keyboard title

The keyboard title can be set via the title attribute.

<z-cell plain type="primary" @touchstart.stop="show = true">
   Pop up keyboard with title
</z-cell>
<z-number-keyboard
   :show="show"
   title="Keyboard title"
   extra-key="."
   close-button-text="Complete"
   @blur="show = false"
   @input="onInput"
   @delete="onDelete"
/>

Configure multiple buttons

When theme is custom, it supports configuring two extra-key in the form of array.

<z-cell plain type="primary" @touchstart.stop="show = true">
   Pop up a keyboard configured with multiple keys
</z-cell>
<z-number-keyboard
   :show="show"
   theme="custom"
   :extra-key="['00', '.']"
   close-button-text="Complete"
   @blur="show = false"
   @input="onInput"
   @delete="onDelete"
/>

Random number keyboard

The numeric keyboard can be randomly ordered through the random-key-order attribute, which is often used in scenarios with high security levels.

<z-cell @touchstart.stop="show = true"> Pop up a keyboard with random numbers </z-cell>
<z-number-keyboard
   :show="show"
   random-key-order
   @blur="show = false"
   @input="onInput"
   @delete="onDelete"
/>

Two-way binding

You can bind the current input value of the keyboard through v-model and limit the input length through the maxlength attribute.

<z-field
   v-model="valueModel"
   label="two-way binding"
   readonly
   clickable
   @click="showValue = true"
/>
<z-number-keyboard
   v-model="valueModel"
   :show="showValue"
   :maxlength="6"
   @blur="showValue = false"
/>

import { ref } from 'vue';
const show = ref(true);
const value = ref('');

Props

Events

Slots

Style variables

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