PasswordInput 密码输入框 - Vant 4

🔐 PasswordInput 密码输入框

🎯 介绍

PasswordInput 组件是带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与数字键盘组件配合使用。让密码输入更加安全便捷！

📦 引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';

const app = createApp();
app.use(PasswordInput);
app.use(NumberKeyboard);

🎯 代码演示

🔧 基础用法

搭配数字键盘组件来实现密码输入功能，就像一个安全的数字保险箱 🔒

html

<template>
  <div class="demo-password-basic">
    <van-password-input
      :value="value"
      info="密码为 6 位数字"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="input-info">当前输入：{{ value }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const value = ref('123');
    const showKeyboard = ref(true);
    
    const onInput = (key) => {
      if (value.value.length < 6) {
        value.value += key;
        if (value.value.length === 6) {
          showToast('密码输入完成 ✅');
        }
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    return {
      value,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-basic {
  padding: 20px;
}
.input-info {
  margin-top: 15px;
  text-align: center;
  color: #666;
}
</style>

📏 自定义长度

通过 length 属性来设置密码长度，适应不同的安全需求 🎯

html

<template>
  <div class="demo-password-length">
    <van-password-input
      :value="value"
      :length="4"
      info="请输入 4 位密码"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="length-info">4位密码模式</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    const showKeyboard = ref(false);
    
    const onInput = (key) => {
      if (value.value.length < 4) {
        value.value += key;
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    return {
      value,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-length {
  padding: 20px;
}
.length-info {
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
}
</style>

格子间距

通过 gutter 属性来设置格子之间的间距，让输入框更有层次感 📐

html

<template>
  <div class="demo-password-gutter">
    <van-password-input
      :value="value"
      :gutter="10"
      info="格子间距为 10px"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="gutter-info">间距让输入更清晰 ✨</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    const showKeyboard = ref(false);
    
    const onInput = (key) => {
      if (value.value.length < 6) {
        value.value += key;
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    return {
      value,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-gutter {
  padding: 20px;
}
.gutter-info {
  margin-top: 10px;
  text-align: center;
  color: #1989fa;
}
</style>

明文展示

将 mask 设置为 false 可以明文展示输入的内容，适用于短信验证码等场景 📱

html

<template>
  <div class="demo-password-mask">
    <van-password-input
      :value="value"
      :mask="false"
      info="验证码明文显示"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="mask-info">验证码模式：{{ value }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    const showKeyboard = ref(false);
    
    const onInput = (key) => {
      if (value.value.length < 6) {
        value.value += key;
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    return {
      value,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-mask {
  padding: 20px;
}
.mask-info {
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}
</style>

提示信息

通过 info 属性设置提示信息，通过 error-info 属性设置错误提示，例如当输入六位时提示密码错误 ⚠️

html

<template>
  <div class="demo-password-info">
    <van-password-input
      :value="value"
      :info="errorInfo ? '' : '请输入 6 位密码'"
      :error-info="errorInfo"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="info-status">
      状态：{{ errorInfo ? '❌ 错误' : '✅ 正常' }}
    </p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const value = ref('123');
    const errorInfo = ref('');
    const showKeyboard = ref(true);
    
    const onInput = (key) => {
      if (value.value.length < 6) {
        value.value += key;
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    watch(value, (newVal) => {
      if (newVal.length === 6 && newVal !== '123456') {
        errorInfo.value = '密码错误，请重新输入';
        showToast('密码错误 ❌');
      } else {
        errorInfo.value = '';
        if (newVal.length === 6) {
          showToast('密码正确 ✅');
        }
      }
    });
    
    return {
      value,
      errorInfo,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-info {
  padding: 20px;
}
.info-status {
  margin-top: 15px;
  text-align: center;
  font-weight: bold;
}
</style>

API

Props

参数	说明	类型	默认值
value	密码值，控制输入框的内容 🔐	string	`''`
info	输入框下方文字提示，给用户友好的指引 💡	string	-
error-info	输入框下方错误提示，显示错误信息 ⚠️	string	-
length	密码最大长度，定义输入框的格子数量 📏	number \| string	`6`
gutter	输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` 📐	number \| string	`0`
mask	是否隐藏密码内容，保护隐私安全 👁️	boolean	`true`
focused	是否已聚焦，聚焦时会显示光标 🎯	boolean	`false`

Events

事件名	说明	回调参数
focus	输入框聚焦时触发，开始输入状态 🎯	-

类型定义

组件导出以下类型定义：

import type { PasswordInputProps } from 'vant';

主题定制

样式变量

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

名称	默认值	描述
--van-password-input-height	50px	输入框高度 📏
--van-password-input-margin	0 var(--van-padding-md)	外边距 📐
--van-password-input-font-size	20px	字体大小 ✏️
--van-password-input-radius	6px	圆角大小 🔘
--van-password-input-background	var(--van-background-2)	背景色 🎨
--van-password-input-info-color	var(--van-text-color-2)	提示文字颜色 💡
--van-password-input-info-font-size	var(--van-font-size-md)	提示文字大小 📝
--van-password-input-error-info-color	var(--van-danger-color)	错误提示颜色 ⚠️
--van-password-input-dot-size	10px	密码圆点大小 🔴
--van-password-input-dot-color	var(--van-text-color)	密码圆点颜色 ⚫
--van-password-input-text-color	var(--van-text-color)	文字颜色 ✏️
--van-password-input-cursor-color	var(--van-text-color)	光标颜色 📍
--van-password-input-cursor-width	1px	光标宽度 📏
--van-password-input-cursor-height	40%	光标高度 📐
--van-password-input-cursor-duration	1s	光标动画时长 ⏱️

📚 相关文档

NumberKeyboard 数字键盘 - 数字输入键盘，密码输入的最佳搭档 ⌨️
Field 输入框 - 通用输入框组件 📝
Form 表单 - 表单验证和提交 📋
Toast 轻提示 - 操作反馈提示 💬
Dialog 弹出框 - 确认和提示弹窗 💭
ConfigProvider 全局配置 - 全局配置组件主题 🎛️

🔐 PasswordInput 密码输入框 ​

🎯 介绍 ​

📦 引入 ​

🎯 代码演示 ​

🔧 基础用法 ​

📏 自定义长度 ​

格子间距 ​

明文展示 ​

提示信息 ​

API ​

Props ​

Events ​

类型定义 ​

主题定制 ​

样式变量 ​

📚 相关文档 ​

🔐 PasswordInput 密码输入框

🎯 介绍

📦 引入

🎯 代码演示

🔧 基础用法

📏 自定义长度

格子间距

明文展示

提示信息

API

Props

Events

类型定义

主题定制

样式变量

📚 相关文档