From f705c9be4c683a27df468f8a1f8ae8e1df493d0e Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 19 Feb 2019 16:52:01 +0800 Subject: [PATCH] [new feature] PasswordInput: add mask prop (#2796) --- packages/password-input/demo/index.vue | 34 +++++++++++++------ packages/password-input/en-US.md | 11 ++++++ packages/password-input/index.less | 3 ++ .../password-input/{index.js => index.tsx} | 34 ++++++++++++++++--- .../test/__snapshots__/demo.spec.js.snap | 12 +++++++ packages/password-input/zh-CN.md | 12 +++++++ 6 files changed, 92 insertions(+), 14 deletions(-) rename packages/password-input/{index.js => index.tsx} (54%) diff --git a/packages/password-input/demo/index.vue b/packages/password-input/demo/index.vue index 2630cc36e..50c9a2eee 100644 --- a/packages/password-input/demo/index.vue +++ b/packages/password-input/demo/index.vue @@ -2,16 +2,24 @@ + + + + @@ -21,26 +29,32 @@ export default { i18n: { 'zh-CN': { - info: '密码为 6 位数字' + info: '密码为 6 位数字', + removeMask: '明文展示' }, 'en-US': { - info: 'Some tips' + info: 'Some tips', + removeMask: 'Remove Mask' } }, data() { return { - value: '123', - showKeyboard: true + value1: '123', + value2: '123', + keyboard: 'value1' }; }, methods: { onInput(key) { - this.value = (this.value + key).slice(0, 6); + const { keyboard } = this; + this[keyboard] = (this[keyboard] + key).slice(0, 6); }, + onDelete() { - this.value = this.value.slice(0, this.value.length - 1); + const { keyboard } = this; + this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1); } } }; diff --git a/packages/password-input/en-US.md b/packages/password-input/en-US.md index 87b12daa7..4b3578d08 100644 --- a/packages/password-input/en-US.md +++ b/packages/password-input/en-US.md @@ -49,12 +49,23 @@ export default { } ``` +#### Without mask + +```html + +``` + ### API | Attribute | Description | Type | Default | |------|------|------|------| | value | Password value | `String` | `''` | | length | Maxlength of password | `Number` | `6` | +| mask | Whether to mask value | `Boolean` | `true` | | info | Bottom info | `String` | - | | error-info | Bottom error info | `String` | - | diff --git a/packages/password-input/index.less b/packages/password-input/index.less index bac41fb0c..3fb769802 100644 --- a/packages/password-input/index.less +++ b/packages/password-input/index.less @@ -38,6 +38,9 @@ flex: 1; height: 100%; position: relative; + font-size: 20px; + line-height: 50px; + text-align: center; &:not(:first-of-type)::after { border-left-width: 1px; diff --git a/packages/password-input/index.js b/packages/password-input/index.tsx similarity index 54% rename from packages/password-input/index.js rename to packages/password-input/index.tsx index b65933fa4..d044b79be 100644 --- a/packages/password-input/index.js +++ b/packages/password-input/index.tsx @@ -1,16 +1,38 @@ import { use } from '../utils'; import { emit, inherit } from '../utils/functional'; +// Types +import { CreateElement, RenderContext } from 'vue/types'; +import { DefaultSlots } from '../utils/use/sfc'; + +export type PasswordInputProps = { + mask: boolean; + info?: string; + value: string; + length: number; + errorInfo?: string; +}; + const [sfc, bem] = use('password-input'); -function PasswordInput(h, props, slots, ctx) { +function PasswordInput( + h: CreateElement, + props: PasswordInputProps, + slots: DefaultSlots, + ctx: RenderContext +) { const info = props.errorInfo || props.info; const Points = []; for (let i = 0; i < props.length; i++) { + const char = props.value[i]; Points.push(
  • - + {props.mask ? ( + + ) : ( + char + )}
    • ); } @@ -19,7 +41,7 @@ function PasswordInput(h, props, slots, ctx) {
      { + onTouchstart={(event: TouchEvent) => { event.stopPropagation(); emit(ctx, 'focus', event); }} @@ -37,6 +59,10 @@ function PasswordInput(h, props, slots, ctx) { PasswordInput.props = { info: String, errorInfo: String, + mask: { + type: Boolean, + default: true + }, value: { type: String, default: '' @@ -47,4 +73,4 @@ PasswordInput.props = { } }; -export default sfc(PasswordInput); +export default sfc(PasswordInput); diff --git a/packages/password-input/test/__snapshots__/demo.spec.js.snap b/packages/password-input/test/__snapshots__/demo.spec.js.snap index ad21d4e77..a186d6f3c 100644 --- a/packages/password-input/test/__snapshots__/demo.spec.js.snap +++ b/packages/password-input/test/__snapshots__/demo.spec.js.snap @@ -18,5 +18,17 @@ exports[`renders demo correctly 1`] = `
      1234567890删除
    +
    +
    +
      +
    • 1
      • +
    • 2
      • +
    • 3
      • +
    • +
    • +
    • +
    +
    +
    `; diff --git a/packages/password-input/zh-CN.md b/packages/password-input/zh-CN.md index 522f0d5de..e445744d9 100644 --- a/packages/password-input/zh-CN.md +++ b/packages/password-input/zh-CN.md @@ -49,12 +49,24 @@ export default { } ``` +#### 明文展示 + +```html + + +``` + ### API | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | value | 密码值 | `String` | `''` | - | | length | 密码最大长度 | `Number` | `6` | - | +| mask | 是否隐藏密码内容 | `Boolean` | `true` | 1.6.6 | | info | 输入框下方文字提示 | `String` | - | - | | error-info | 输入框下方错误提示 | `String` | - | - |