feat(PasswordInput): length can be string

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
 

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
 

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++) {
+  for (let i = 0; i < length; i++) {
-    const char = props.value[i];
+    const char = value[i];
-    const showBorder = i !== 0 && !props.gutter;
+    const showBorder = i !== 0 && !gutter;
-    const showCursor = props.focused && i === props.value.length;
+    const showCursor = focused && i === value.length;
 
     let style;
-    if (i !== 0 && props.gutter) {
+    if (i !== 0 && gutter) {
-      style = { marginLeft: addUnit(props.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 && (
+      {info && <div class={bem(errorInfo ? 'error-info' : 'info')}>{info}</div>}
-        <div class={bem(props.errorInfo ? 'error-info' : 'info')}>{info}</div>
-      )}
     </div>
   );
 }
@@ -83,7 +82,7 @@ PasswordInput.props = {
     default: '',
   },
   length: {
-    type: Number,
+    type: [Number, String],
     default: 6,
   },
 };