/*! For license information please see 2597.ed86d57e.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["2597"],{23010:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

PasswordInput

\n

Intro

\n

The PasswordInput component is usually used with NumberKeyboard Component.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { PasswordInput, NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(PasswordInput);\napp.use(NumberKeyboard);\n
\n

Usage

\n

Basic Usage

\n
<van-password-input\n  :value="value"\n  :focused="showKeyboard"\n  @focus="showKeyboard = true"\n/>\n<van-number-keyboard\n  v-model="value"\n  :show="showKeyboard"\n  @blur="showKeyboard = false"\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('123');\n    const showKeyboard = ref(true);\n\n    return {\n      value,\n      showKeyboard,\n    };\n  },\n};\n
\n

Custom Length

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

Add Gutter

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

Without Mask

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

Hint Error

\n

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

\n
<van-password-input\n  :value="value"\n  info="Some tips"\n  :error-info="errorInfo"\n  :focused="showKeyboard"\n  @focus="showKeyboard = true"\n/>\n<van-number-keyboard\n  v-model="value"\n  :show="showKeyboard"\n  @blur="showKeyboard = false"\n/>\n
\n
import { ref, watch } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('123');\n    const errorInfo = ref('');\n    const showKeyboard = ref(true);\n\n    watch(value, (newVal) => {\n      if (newVal.length === 6 && newVal !== '123456') {\n        errorInfo.value = 'Password Mistake';\n      } else {\n        errorInfo.value = '';\n      }\n    });\n\n    return {\n      value,\n      errorInfo,\n      showKeyboard,\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
valuePassword valuestring\'\'
infoBottom infostring-
error-infoBottom error infostring-
lengthMaxlength of passwordnumber | string6
gutterGutter of inputnumber | string0
maskWhether to mask valuebooleantrue
focusedWhether to show focused cursorbooleanfalse
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
focusEmitted when input is focused-
\n

Types

\n

The component exports the following type definitions:

\n
import type { PasswordInputProps } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-password-input-height50px-
--van-password-input-margin0 var(--van-padding-md)-
--van-password-input-font-size20px-
--van-password-input-radius6px-
--van-password-input-backgroundvar(--van-background-2)-
--van-password-input-info-colorvar(--van-text-color-2)-
--van-password-input-info-font-sizevar(--van-font-size-md)-
--van-password-input-error-info-colorvar(--van-danger-color)-
--van-password-input-dot-size10px-
--van-password-input-dot-colorvar(--van-text-color)-
--van-password-input-text-colorvar(--van-text-color)-
--van-password-input-cursor-colorvar(--van-text-color)-
--van-password-input-cursor-width1px-
--van-password-input-cursor-height40%-
--van-password-input-cursor-duration1s-
\n
'},null,8,e))}}}]);