PasswordInput Password input box

introduce

The input box component with grid can be used to enter passwords, SMS verification codes and other scenarios. It is usually used in conjunction with the Number Keyboard component.

Code Demo

Basic usage

Use the numeric keyboard component to realize the password input function.

<!-- Password input box -->
<z-password-input
   :value="value"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
/>
<!-- Numeric keyboard -->
<z-number-keyboard
   v-model="value"
   :show="showKeyboard"
   @blur="showKeyboard = false"
/>
import { ref } from 'vue';
const value = ref('123');
const showKeyboard = ref(true);

Custom length

Set the password length through the length property.

<z-password-input
   :value="value"
   :length="4"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
/>

Grid spacing

Use the gutter property to set the spacing between grids.

<z-password-input
   :value="value"
   :gutter="10"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
/>

Plain text display

Setting mask to false can display the input content in plain text, which is suitable for scenarios such as SMS verification codes.

<z-password-input
   :value="value"
   :mask="false"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
/>

Prompt information

Set the prompt information through the info attribute, and set the error prompt through the error-info attribute. For example, when entering six digits, you will be prompted for an incorrect password.

<z-password-input
   :value="value"
   info="Password is 6 digits"
   :error-info="errorInfo"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
/>
<z-number-keyboard
   v-model="value"
   :show="showKeyboard"
   @blur="showKeyboard = false"
/>
import { ref, watch } from 'vue';
const value = ref('123');
const errorInfo = ref('');
const showKeyboard = ref(true);
watch(value, (newVal) => {
   if (newVal.length === 6 && newVal !== '123456') {
     errorInfo.value = 'Wrong password';
   } else {
     errorInfo.value = '';
   }
});

API

Props

ParametersDescriptionTypeDefault value
valuePassword valuestring''
infoText prompt below the input boxstring-
error-infoError message below the input boxstring-
lengthMaximum password lengthnumber | string6
gutterThe spacing between input box grids, such as 40rpx, the default unit is pxnumber | string0
maskWhether to hide password contentbooleantrue
focusedWhether it is focused, the cursor will be displayed when focusedbooleanfalse

Events

Event nameDescriptionCallback parameters
focusTriggered when the input box is focused-

Theme customization

Style variables

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

NameDefaultDescription
--z-password-input-height100rpx-
--z-password-input-margin0 var(--z-padding-md)-
--z-password-input-font-size40rpx-
--z-password-input-radius12rpx-
--z-password-input-backgroundvar(--z-background-2)-
--z-password-input-info-colorvar(--z-text-color-2)-
--z-password-input-info-font-sizevar(--z-font-size-md)-
--z-password-input-error-info-colorvar(--z-danger-color)-
--z-password-input-dot-size20rpx-
--z-password-input-dot-colorvar(--z-text-color)-
--z-password-input-text-colorvar(--z-text-color)-
--z-password-input-cursor-colorvar(--z-text-color)-
--z-password-input-cursor-width2rpx-
--z-password-input-cursor-height40%-
--z-password-input-cursor-duration1s-