diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 47e7d4364..277183a23 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -116,6 +116,10 @@ - 新增`left-icon`插槽 - 新增`right-icon`插槽 +### PasswordInput + +- 新增`gutter`属性 + ### Popup - 新增`click`事件 diff --git a/packages/password-input/demo/index.vue b/packages/password-input/demo/index.vue index 50c9a2eee..8f438a039 100644 --- a/packages/password-input/demo/index.vue +++ b/packages/password-input/demo/index.vue @@ -15,9 +15,18 @@ /> - + + + + + @@ -30,10 +39,12 @@ export default { i18n: { 'zh-CN': { info: '密码为 6 位数字', + customLength: '自定义长度', removeMask: '明文展示' }, 'en-US': { info: 'Some tips', + customLength: 'Custom Length', removeMask: 'Remove Mask' } }, @@ -42,6 +53,7 @@ export default { return { value1: '123', value2: '123', + value3: '123', keyboard: 'value1' }; }, diff --git a/packages/password-input/en-US.md b/packages/password-input/en-US.md index a379ee8f1..e777dff1a 100644 --- a/packages/password-input/en-US.md +++ b/packages/password-input/en-US.md @@ -53,6 +53,17 @@ export default { } ``` +### Custom length + +```html + +``` + ### Without mask ```html @@ -74,6 +85,7 @@ export default { | mask | Whether to mask value | `Boolean` | `true` | | info | Bottom info | `String` | - | | error-info | Bottom error info | `String` | - | +| gutter | Gutter of input | `Number | String` | `0` | ### Events diff --git a/packages/password-input/index.less b/packages/password-input/index.less index a6187eb12..a32e0476b 100644 --- a/packages/password-input/index.less +++ b/packages/password-input/index.less @@ -28,7 +28,6 @@ display: flex; width: 100%; height: 50px; - background-color: @white; &::after { border-radius: 6px; @@ -41,10 +40,7 @@ font-size: 20px; line-height: 50px; text-align: center; - - &:not(:first-of-type)::after { - border-left-width: 1px; - } + background-color: @white; } i { diff --git a/packages/password-input/index.tsx b/packages/password-input/index.tsx index 04dd76206..867d8a82c 100644 --- a/packages/password-input/index.tsx +++ b/packages/password-input/index.tsx @@ -1,4 +1,4 @@ -import { use } from '../utils'; +import { use, suffixPx } from '../utils'; import { emit, inherit } from '../utils/functional'; // Types @@ -10,6 +10,7 @@ export type PasswordInputProps = { info?: string; value: string; length: number; + gutter: number; errorInfo?: string; }; @@ -26,13 +27,16 @@ function PasswordInput( const Points = []; for (let i = 0; i < props.length; i++) { const char = props.value[i]; + const showBorder = i !== 0 && !props.gutter; + + let style; + if (i !== 0 && props.gutter) { + style = { marginLeft: suffixPx(props.gutter) }; + } + Points.push( -
  • - {props.mask ? ( - - ) : ( - char - )} +
  • + {props.mask ? : char}
  • ); } @@ -40,7 +44,7 @@ function PasswordInput( return (
      { event.stopPropagation(); emit(ctx, 'focus', event); @@ -49,9 +53,7 @@ function PasswordInput( > {Points}
    - {info && ( -
    {info}
    - )} + {info &&
    {info}
    }
    ); } @@ -59,6 +61,7 @@ function PasswordInput( PasswordInput.props = { info: String, errorInfo: String, + gutter: [String, Number], mask: { type: Boolean, default: true diff --git a/packages/password-input/test/__snapshots__/demo.spec.js.snap b/packages/password-input/test/__snapshots__/demo.spec.js.snap index 2c9b73076..489e24d59 100644 --- a/packages/password-input/test/__snapshots__/demo.spec.js.snap +++ b/packages/password-input/test/__snapshots__/demo.spec.js.snap @@ -5,12 +5,12 @@ exports[`renders demo correctly 1`] = `
      -
    • -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    • +
    密码为 6 位数字
    @@ -18,15 +18,25 @@ exports[`renders demo correctly 1`] = `
    1234567890删除
    +
    +
    +
      +
    • +
    • +
    • +
    • +
    +
    +
      -
    • 1
    • -
    • 2
    • -
    • 3
    • -
    • -
    • -
    • +
    • 1
    • +
    • 2
    • +
    • 3
    • +
    • +
    • +
    diff --git a/packages/password-input/zh-CN.md b/packages/password-input/zh-CN.md index d06f145da..7e9b00bd4 100644 --- a/packages/password-input/zh-CN.md +++ b/packages/password-input/zh-CN.md @@ -52,10 +52,20 @@ export default { } ``` +### 自定义长度 + +```html + +``` + ### 明文展示 ```html -