Press UI

# PasswordInput 密码输入框

The PasswordInput component is usually used with NumberKeyboard Component.

# Usage

# Basic Usage

<press-password-input
  :value="value"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<press-number-keyboard
  v-model="value"
  :show="showKeyboard"
  @blur="showKeyboard = false"
/>

import { ref } from 'vue';

export default {
  setup() {
    const value = ref('123');
    const showKeyboard = ref(true);

    return {
      value,
      showKeyboard,
    };
  },
};

# Custom Length

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

# Add Gutter

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

# Without Mask

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

# Hint Error

Use info to set info message, use error-info prop to set error message.

<press-password-input
  :value="value"
  info="Some tips"
  :error-info="errorInfo"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<press-number-keyboard
  v-model="value"
  :show="showKeyboard"
  @blur="showKeyboard = false"
/>

import { ref, watch } from 'vue';

export default {
  setup() {
    const value = ref('123');
    const errorInfo = ref('');
    const showKeyboard = ref(true);

    watch(value, (newVal) => {
      if (newVal.length === 6 && newVal !== '123456') {
        errorInfo.value = 'Password Mistake';
      } else {
        errorInfo.value = '';
      }
    });

    return {
      value,
      errorInfo,
      showKeyboard,
    };
  },
};

# API

# Props

Attribute Description Type Default
value Password value string ''
info Bottom info string -
error-info Bottom error info string -
length Maxlength of password number | string 6
gutter Gutter of input number | string 0
mask Whether to mask value boolean true
focused Whether to show focused cursor boolean false

# Events

Event Description Arguments
focus Emitted when input is focused -

# Theming

# CSS Variables

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

Name Default Value Description
--press-password-input-height 50px -
--press-password-input-margin 0 var(--press-padding-md) -
--press-password-input-font-size 20px -
--press-password-input-radius 6px -
--press-password-input-background var(--press-background-2) -
--press-password-input-info-color var(--press-text-color-2) -
--press-password-input-info-font-size var(--press-font-size-md) -
--press-password-input-error-info-color var(--press-danger-color) -
--press-password-input-dot-size 10px -
--press-password-input-dot-color var(--press-text-color) -
--press-password-input-text-color var(--press-text-color) -
--press-password-input-cursor-color var(--press-text-color) -
--press-password-input-cursor-width 1px -
--press-password-input-cursor-height 40% -
--press-password-input-cursor-duration 1s -
横屏

← Picker →