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.

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 = '';
   }
});

Props

Events

Style variables

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