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 ) { - 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(
  • - {props.mask ? ( + {mask ? ( ) : ( char @@ -53,7 +54,7 @@ function PasswordInput( return (
      { event.stopPropagation(); emit(ctx, 'focus', event); @@ -62,9 +63,7 @@ function PasswordInput( > {Points}
    - {info && ( -
    {info}
    - )} + {info &&
    {info}
    }
    ); } @@ -83,7 +82,7 @@ PasswordInput.props = { default: '', }, length: { - type: Number, + type: [Number, String], default: 6, }, };