PasswordInput Password Input

A grid-based password input component, suitable for payment passwords, SMS verification codes, and other scenarios. Usually used in conjunction with the Keyboard component.

wd-password-input is only responsible for displaying input values, cursor, and prompt information, and does not directly handle input logic. Usually focused is bound to the keyboard visibility state, and the keyboard is opened in the focus event.

Component Type

Basic Usage

Use with wd-keyboard component to achieve password input.

<wd-password-input v-model="value" :focused="showKeyboard" @focus="showKeyboard = true" />
<wd-keyboard v-model="value" v-model:visible="showKeyboard" :maxlength="6" />

import { ref } from 'vue'

const value = ref<string>('123')
const showKeyboard = ref<boolean>(false)

Component Variants

Custom Length

Set password digits via length, and synchronize setting keyboard's maxlength.

<wd-password-input v-model="value" :length="4" :focused="showKeyboard" @focus="showKeyboard = true" />
<wd-keyboard v-model="value" v-model:visible="showKeyboard" :maxlength="4" />

Component Style

Grid Spacing

Set spacing between grids via gutter, default unit is px.

<wd-password-input v-model="value" :gutter="10" :focused="showKeyboard" @focus="showKeyboard = true" />
<wd-keyboard v-model="value" v-model:visible="showKeyboard" :maxlength="6" />

Content Form

Plain Text Display

Set mask to false to display input content in plain text, suitable for SMS verification codes and other scenarios.

<wd-password-input v-model="value" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true" />
<wd-keyboard v-model="value" v-model:visible="showKeyboard" :maxlength="6" />

Prompt Information

Set normal prompt information via info, and error prompts via error-info.

<wd-password-input
  v-model="value"
  info="Password is 6 digits"
  :error-info="errorInfo"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<wd-keyboard v-model="value" v-model:visible="showKeyboard" :maxlength="6" />

import { ref, watch } from 'vue'

const value = ref('123')
const errorInfo = ref('')
const showKeyboard = ref(false)

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

Special Usage

Random Keyboard

Combined with wd-keyboard's random-key-order capability, security in numeric input scenarios can be enhanced.

<wd-password-input v-model="value" :focused="showKeyboard" @focus="showKeyboard = true" />
<wd-keyboard v-model="value" v-model:visible="showKeyboard" :maxlength="6" random-key-order />

Attributes

Parameter	Description	Type	Default Value
v-model	Current input value	string	''
mask	Whether to hide password content	boolean	true
info	Text prompt below input box	string	''
error-info	Error prompt below input box	string	''
gutter	Spacing between input box grids, default unit is px	number | string	0
length	Password length	number	6
focused	Whether in focused state; cursor is displayed when focused, usually linked with keyboard visibility state	boolean	true
custom-class	Custom class name for root node	string	''
custom-style	Custom style for root node	string	''

Events

Event Name	Description	Parameters
focus	Triggered when clicking password input box	event: Event

External Style Classes

Class Name	Description
custom-class	Root node style

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-password-input-height	$n-50	输入区域高度
--wot-password-input-margin	$n-16	组件外边距
--wot-password-input-font-size	$typography-title-size-large	输入字号
--wot-password-input-line-height	$typography-title-line-height-size-large	输入行高
--wot-password-input-radius	$n-6	输入格圆角
--wot-password-input-bg	$filled-oppo	输入格背景色
--wot-password-input-info-color	$text-auxiliary	提示信息颜色
--wot-password-input-info-font-size	$typography-body-size-main	提示信息字号
--wot-password-input-border-color	$border-main	边框颜色
--wot-password-input-border-width	$stroke-main	边框宽度
--wot-password-input-error-info-color	$danger-main	错误提示颜色
--wot-password-input-dot-size	$n-10	密码点尺寸
--wot-password-input-dot-color	$text-main	密码点颜色
--wot-password-input-dot-radius	$radius-full	密码点圆角
--wot-password-input-text-color	$text-main	输入文本颜色
--wot-password-input-cursor-color	$text-main	光标颜色
--wot-password-input-cursor-width	$n-1	光标宽度
--wot-password-input-cursor-height	40%	光标高度
--wot-password-input-cursor-duration	1s	光标闪烁周期

Source Code

Documentation

• Component