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
Parameters | Description | Type | Default value |
---|---|---|---|
value | Password value | string | '' |
info | Text prompt below the input box | string | - |
error-info | Error message below the input box | string | - |
length | Maximum password length | number | string | 6 |
gutter | The spacing between input box grids, such as 40rpx , the default unit is px | number | string | 0 |
mask | Whether to hide password content | boolean | true |
focused | Whether it is focused, the cursor will be displayed when focused | boolean | false |
Events
Event name | Description | Callback parameters |
---|---|---|
focus | Triggered 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.
Name | Default | Description |
---|---|---|
--z-password-input-height | 100rpx | - |
--z-password-input-margin | 0 var(--z-padding-md) | - |
--z-password-input-font-size | 40rpx | - |
--z-password-input-radius | 12rpx | - |
--z-password-input-background | var(--z-background-2) | - |
--z-password-input-info-color | var(--z-text-color-2) | - |
--z-password-input-info-font-size | var(--z-font-size-md) | - |
--z-password-input-error-info-color | var(--z-danger-color) | - |
--z-password-input-dot-size | 20rpx | - |
--z-password-input-dot-color | var(--z-text-color) | - |
--z-password-input-text-color | var(--z-text-color) | - |
--z-password-input-cursor-color | var(--z-text-color) | - |
--z-password-input-cursor-width | 2rpx | - |
--z-password-input-cursor-height | 40% | - |
--z-password-input-cursor-duration | 1s | - |