mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 09:38:44 +08:00
b8c68f92f7
* feat: ✨ 增加 wd-password-input 输入框 * feat: ✨ 增加 wd-password-input 密码输入框（引入数字键盘） * feat: ✨ 增加 wd-password-input 密码输入框 * feat: ✨ 增加 wd-password-input 密码输入框 --------- Co-authored-by: pangzhaozhao <zhaozhao.pang@sincerecloud.com>
146 lines
3.5 KiB
Markdown
146 lines
3.5 KiB
Markdown
<frame/>
|
||
|
||
|
||
# PasswordInput 密码输入框
|
||
|
||
带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](./number-keyboard.md)组件配合使用。
|
||
|
||
## 基础用法
|
||
|
||
搭配数字键盘组件来实现密码输入功能。
|
||
|
||
```html
|
||
<!-- 密码输入框 -->
|
||
<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"
|
||
/>
|
||
```
|
||
```typescript
|
||
import { ref } from 'vue';
|
||
|
||
const value = ref<string>('123');
|
||
const showKeyboard = ref<boolean>(true);
|
||
```
|
||
|
||
### 自定义长度
|
||
|
||
通过`length`属性来设置密码长度。
|
||
|
||
```html
|
||
<!-- 密码输入框 -->
|
||
<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`属性来设置格子之间的间距。
|
||
|
||
```html
|
||
<!-- 密码输入框 -->
|
||
<wd-password-input
|
||
:value="value"
|
||
:gutter="10"
|
||
:focused="showKeyboard"
|
||
@focus="showKeyboard = true"
|
||
/>
|
||
```
|
||
|
||
### 明文展示
|
||
|
||
将`mask`设置为`false`可以明文展示输入的内容，适用于短信验证码等场景。
|
||
|
||
```html
|
||
<!-- 密码输入框 -->
|
||
<wd-password-input
|
||
:value="value"
|
||
:mask="false"
|
||
:focused="showKeyboard"
|
||
@focus="showKeyboard = true"
|
||
/>
|
||
```
|
||
|
||
### 提示信息
|
||
|
||
通过`info`属性设置提示信息，通过`error-info`属性设置错误提示，例如当输入六位时提示密码错误。
|
||
|
||
```html
|
||
<!-- 密码输入框 -->
|
||
<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"
|
||
/>
|
||
```
|
||
```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 | 输入框聚焦时触发 | | - |
|
||
|
||
|
||
|