PasswordInput 密码输入框

引入

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

基础用法

搭配数字键盘组件来实现密码输入功能。

  2. <van-password-input
  3.   :value="value"
  4.   :focused="showKeyboard"
  5.   @focus="showKeyboard = true"
  6. />
  7. <van-number-keyboard
  8.   v-model="value"
  9.   :show="showKeyboard"
  10.   @blur="showKeyboard = false"
  11. />
  1. <van-password-input
  2.   :value="value"
  3.   :length="4"
  4.   :focused="showKeyboard"
  5.   @focus="showKeyboard = true"
  6. />

格子间距

通过 gutter 属性来设置格子之间的间距。

明文展示

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

  1. <van-password-input
  2.   :value="value"
  3.   :mask="false"
  4.   :focused="showKeyboard"
  5.   @focus="showKeyboard = true"
  6. />
  1. import { ref, watch } from 'vue';
  3.   setup() {
  4.     const value = ref('123');
  5.     const errorInfo = ref('');
  6.     const showKeyboard = ref(true);
  8.     watch(value, (newVal) => {
  9.       if (newVal.length === 6 && newVal !== '123456') {
  11.       } else {
  12.         errorInfo.value = '';
  13.       }
  14.     });
  16.     return {
  17.       value,
  18.       errorInfo,
  19.       showKeyboard,
  20.     };
  21.   },

Props

Events

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