From ebe6e67453fdab0bd4092c41130f0b972901b43c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 29 Jan 2020 15:36:21 +0800
Subject: [PATCH] feat(PasswordInput): length can be string
---
src/password-input/README.md | 6 +++---
src/password-input/README.zh-CN.md | 6 +++---
src/password-input/index.tsx | 27 +++++++++++++--------------
3 files changed, 19 insertions(+), 20 deletions(-)
diff --git a/src/password-input/README.md b/src/password-input/README.md
index 9c0cac9c0..58fc4b192 100644
--- a/src/password-input/README.md
+++ b/src/password-input/README.md
@@ -130,12 +130,12 @@ export default {
| Attribute | Description | Type | Default |
|------|------|------|------|
| value | Password value | *string* | `''` |
-| length | Maxlength of password | *number* | `6` |
-| mask | Whether to mask value | *boolean* | `true` |
-| focused `v2.1.8` | Whether to show focused cursor | *boolean* | `false` |
| info | Bottom info | *string* | - |
| error-info | Bottom error info | *string* | - |
+| length | Maxlength of password | *number \| string* | `6` |
| gutter | Gutter of input | *number \| string* | `0` |
+| mask | Whether to mask value | *boolean* | `true` |
+| focused `v2.1.8` | Whether to show focused cursor | *boolean* | `false` |
### Events
diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md
index 6cc872ae1..20453daf3 100644
--- a/src/password-input/README.zh-CN.md
+++ b/src/password-input/README.zh-CN.md
@@ -130,12 +130,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| value | 密码值 | *string* | `''` |
-| length | 密码最大长度 | *number* | `6` |
-| mask | 是否隐藏密码内容 | *boolean* | `true` |
-| focused `v2.1.8` | 是否已聚焦，聚焦时会显示光标 | *boolean* | `false` |
| info | 输入框下方文字提示 | *string* | - |
| error-info | 输入框下方错误提示 | *string* | - |
+| length | 密码最大长度 | *number \| string* | `6` |
| gutter | 输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` | *number \| string* | `0` |
+| mask | 是否隐藏密码内容 | *boolean* | `true` |
+| focused `v2.1.8` | 是否已聚焦，聚焦时会显示光标 | *boolean* | `false` |
### Events
diff --git a/src/password-input/index.tsx b/src/password-input/index.tsx
index 8b63f3a30..b40c19cf5 100644
--- a/src/password-input/index.tsx
+++ b/src/password-input/index.tsx
@@ -11,7 +11,7 @@ export type PasswordInputProps = {
mask: boolean;
info?: string;
value: string;
- length: number;
+ length: number | string;
gutter: number;
focused?: boolean;
errorInfo?: string;
@@ -25,22 +25,23 @@ function PasswordInput(
slots: DefaultSlots,
ctx: RenderContext<PasswordInputProps>
) {
- const info = props.errorInfo || props.info;
+ const { mask, value, length, gutter, focused, errorInfo } = props;
+ const info = errorInfo || props.info;
const Points = [];
- for (let i = 0; i < props.length; i++) {
- const char = props.value[i];
- const showBorder = i !== 0 && !props.gutter;
- const showCursor = props.focused && i === props.value.length;
+ for (let i = 0; i < length; i++) {
+ const char = value[i];
+ const showBorder = i !== 0 && !gutter;
+ const showCursor = focused && i === value.length;
let style;
- if (i !== 0 && props.gutter) {
- style = { marginLeft: addUnit(props.gutter) };
+ if (i !== 0 && gutter) {
+ style = { marginLeft: addUnit(gutter) };
}
Points.push(
<li class={{ [BORDER_LEFT]: showBorder }} style={style}>
- {props.mask ? (
+ {mask ? (
<i style={{ visibility: char ? 'visible' : 'hidden' }} />
) : (
char
@@ -53,7 +54,7 @@ function PasswordInput(
return (
<div class={bem()}>
<ul
- class={[bem('security'), { [BORDER_SURROUND]: !props.gutter }]}
+ class={[bem('security'), { [BORDER_SURROUND]: !gutter }]}
onTouchstart={(event: TouchEvent) => {
event.stopPropagation();
emit(ctx, 'focus', event);
@@ -62,9 +63,7 @@ function PasswordInput(
>
{Points}
</ul>
- {info && (
- <div class={bem(props.errorInfo ? 'error-info' : 'info')}>{info}</div>
- )}
+ {info && <div class={bem(errorInfo ? 'error-info' : 'info')}>{info}</div>}
</div>
);
}
@@ -83,7 +82,7 @@ PasswordInput.props = {
default: '',
},
length: {
- type: Number,
+ type: [Number, String],
default: 6,
},
};