PasswordInput 密码输入框

引入

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

基础用法

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

  2. <van-password-input
  3.   :value="value"
  4.   :focused="showKeyboard"
  5.   @focus="showKeyboard = true"
  6. />
  7. <!-- 数字键盘 -->
  8. <van-number-keyboard
  9.   v-model="value"
  10.   :show="showKeyboard"
  11. />
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const value = ref('123');
  6.     const showKeyboard = ref(true);
  8.     return {
  9.       value,
  10.       showKeyboard,
  11.     };
  12.   },
  13. };

格子间距

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

  1. <van-password-input
  2.   :value="value"
  3.   :gutter="10"
  4.   :focused="showKeyboard"
  5.   @focus="showKeyboard = true"
  6. />

明文展示

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

  1. <van-password-input
  2.   :value="value"
  3.   :mask="false"
  4.   :focused="showKeyboard"
  5. />
  1. import { ref, watch } from 'vue';
  3. export default {
  4.   setup() {
  5.     const value = ref('123');
  6.     const errorInfo = ref('');
  7.     const showKeyboard = ref(true);
  9.     watch(value, (newVal) => {
  10.       if (newVal.length === 6 && newVal !== '123456') {
  11.         errorInfo.value = '密码错误';
  12.       } else {
  13.         errorInfo.value = '';
  14.       }
  15.     });
  17.     return {
  18.       value,
  19.       errorInfo,
  20.       showKeyboard,
  21.     };
  22.   },
  23. };

Props

Events

组件导出以下类型定义：

    样式变量

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