wot-design-uni/docs/component/password-input.md

PasswordInput 密码输入框

带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与数字键盘组件配合使用。

基础用法

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

<!-- 密码输入框 -->
<wd-password-input
  :value="value"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<!-- 数字键盘 -->
<wd-number-keyboard
  v-model="value"
  v-model:visible="showKeyboard" 
  :maxlength="4"
  @blur="showKeyboard = false"
/>

import { ref } from 'vue';

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

自定义长度

通过length属性来设置密码长度。

<!-- 密码输入框 -->
<wd-password-input
  :value="value"
  :length="4"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<wd-number-keyboard 
  v-model="value"
  v-model:visible="showKeyboard" 
  :maxlength="4"
  @blur="showKeyboard = false"
  >
</wd-number-keyboard>

格子间距

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

<!-- 密码输入框 -->
<wd-password-input
  :value="value"
  :gutter="10"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>

明文展示

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

<!-- 密码输入框 -->
<wd-password-input
  :value="value"
  :mask="false"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>

提示信息

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

<!-- 密码输入框 -->
<wd-password-input
  :value="value"
  info="密码为 6 位数字"
  :error-info="errorInfo"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<!-- 数字键盘 -->
<wd-number-keyboard
  v-model="value"
  :show="showKeyboard"
  :maxlength="6"
  @blur="showKeyboard = false"
/>

import { ref, watch } from 'vue';

const value = ref('123');
const errorInfo = ref('');
const showKeyboard = ref(true);

watch(value, (newVal) => {
  if (newVal.length === 6 && newVal !== '123456') {
    errorInfo.value = '密码错误';
  } else {
    errorInfo.value = '';
  }
});

Attributes

参数	说明	类型	可选值	默认值	最低版本
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	输入框聚焦时触发		-