# PasswordInput 密码输入框 带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](./number-keyboard.md)组件配合使用。 ## 基础用法 搭配数字键盘组件来实现密码输入功能。 ```html ``` ```typescript import { ref } from 'vue'; const value = ref('123'); const showKeyboard = ref(true); ``` ### 自定义长度 通过`length`属性来设置密码长度。 ```html ``` ### 格子间距 通过`gutter`属性来设置格子之间的间距。 ```html ``` ### 明文展示 将`mask`设置为`false`可以明文展示输入的内容，适用于短信验证码等场景。 ```html ``` ### 提示信息 通过`info`属性设置提示信息，通过`error-info`属性设置错误提示，例如当输入六位时提示密码错误。 ```html ``` ```typescript 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 | 输入框聚焦时触发 | | - |