From af43521fa2e50634da51df969b1df73033eaab59 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 1 Oct 2020 17:01:58 +0800 Subject: [PATCH] docs(PasswordInput): adjust demo --- src/password-input/README.md | 51 +++---- src/password-input/README.zh-CN.md | 56 ++++---- src/password-input/demo/index.vue | 130 +++++++++++------- .../test/__snapshots__/demo.spec.js.snap | 110 ++++++++------- 4 files changed, 195 insertions(+), 152 deletions(-) diff --git a/src/password-input/README.md b/src/password-input/README.md index cc91d5136..dc469b83a 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -19,18 +19,14 @@ Vue.use(NumberKeyboard); ### Basic Usage ```html - - ``` @@ -43,30 +39,32 @@ export default { showKeyboard: true, }; }, - methods: { - onInput(key) { - this.value = (this.value + key).slice(0, 6); - }, - onDelete() { - this.value = this.value.slice(0, this.value.length - 1); - }, - }, }; ``` -### Custom length +### Custom Length ```html ``` -### Without mask +### Add Gutter + +```html + +``` + +### Without Mask ```html - - ``` @@ -104,22 +99,18 @@ export default { data() { return { value: '123', - showKeyboard: true, errorInfo: '', + showKeyboard: true, }; }, - methods: { - onInput(key) { - this.value = (this.value + key).slice(0, 6); - if (this.value.length === 6) { + watch: { + value(value) { + if (value.length === 6 && value !== '123456') { this.errorInfo = 'Password Mistake'; } else { this.errorInfo = ''; } }, - onDelete() { - this.value = this.value.slice(0, this.value.length - 1); - }, }, }; ``` diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index fdc6e3d51..c892a818f 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。 +带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。 ### 引入 @@ -18,19 +18,19 @@ Vue.use(NumberKeyboard); ### 基础用法 +搭配数字键盘组件来实现密码输入功能。 + ```html ``` @@ -43,24 +43,30 @@ export default { showKeyboard: true, }; }, - methods: { - onInput(key) { - this.value = (this.value + key).slice(0, 6); - }, - onDelete() { - this.value = this.value.slice(0, this.value.length - 1); - }, - }, }; ``` ### 自定义长度 +通过 `length` 属性来设置密码长度。 + ```html +``` + +### 格子间距 + +通过 `gutter` 属性来设置格子之间的间距。 + +```html + @@ -68,6 +74,8 @@ export default { ### 明文展示 +将 `mask` 设置为 `false` 可以明文展示输入的内容，适用于短信验证码等场景。 + ```html ``` -### 错误提示 +### 提示信息 -通过 `error-info` 属性可以设置错误提示信息，例如当输入六位时提示密码错误。 +通过 `info` 属性设置提示信息，通过 `error-info` 属性设置错误提示，例如当输入六位时提示密码错误。 ```html - - ``` @@ -103,22 +109,18 @@ export default { data() { return { value: '123', - showKeyboard: true, errorInfo: '', + showKeyboard: true, }; }, - methods: { - onInput(key) { - this.value = (this.value + key).slice(0, 6); - if (this.value.length === 6) { + watch: { + value(value) { + if (value.length === 6 && value !== '123456') { this.errorInfo = '密码错误'; } else { this.errorInfo = ''; } }, - onDelete() { - this.value = this.value.slice(0, this.value.length - 1); - }, }, }; ``` diff --git a/src/password-input/demo/index.vue b/src/password-input/demo/index.vue index d321ade5e..28122ac87 100644 --- a/src/password-input/demo/index.vue +++ b/src/password-input/demo/index.vue @@ -1,48 +1,56 @@ @@ -51,46 +59,76 @@ export default { i18n: { 'zh-CN': { info: '密码为 6 位数字', - customLength: '自定义长度', - removeMask: '明文展示', - hintError: '错误提示', + showInfo: '提示信息', + addGutter: '格子间距', errorInfo: '密码错误', + removeMask: '明文展示', + customLength: '自定义长度', }, 'en-US': { info: 'Some tips', - customLength: 'Custom Length', - removeMask: 'Remove Mask', - hintError: 'Hint Error', + showInfo: 'Show Info', + addGutter: 'Add Gutter', errorInfo: 'Password Mistake', + removeMask: 'Remove Mask', + customLength: 'Custom Length', }, }, data() { return { - value1: '123', - value2: '123', - value3: '123', - value4: '123', - keyboard: 'value1', + value: { + showInfo: '123', + addGutter: '123', + basicUsage: '123', + removeMask: '123', + customLength: '123', + }, + current: 'basicUsage', errorInfo: '', }; }, - methods: { - onInput(key) { - const { keyboard } = this; - this[keyboard] = (this[keyboard] + key).slice(0, 6); - if (this[keyboard].length === 6) { - this.errorInfo = this.t('errorInfo'); - } else { - this.errorInfo = ''; + watch: { + current(value) { + if (value) { + const el = this.$refs[value].$el; + const { top } = el.getBoundingClientRect(); + window.scrollTo(0, window.pageYOffset + top); } }, + }, + methods: { + onInput(key) { + const { value, current } = this; + const maxlegnth = current === 'customLength' ? 4 : 6; + const newValue = (value[current] + key).slice(0, maxlegnth); + + value[current] = newValue; + + if ( + current === 'showInfo' && + newValue.length === 6 && + newValue !== '123456' + ) { + this.errorInfo = this.t('errorInfo'); + } + }, onDelete() { - const { keyboard } = this; - this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1); + const { value, current } = this; + value[current] = value[current].slice(0, value[current].length - 1); + + if (current === 'showInfo') { + this.errorInfo = ''; + } }, }, }; + + diff --git a/src/password-input/test/__snapshots__/demo.spec.js.snap b/src/password-input/test/__snapshots__/demo.spec.js.snap index ca92591da..6a78e4814 100644 --- a/src/password-input/test/__snapshots__/demo.spec.js.snap +++ b/src/password-input/test/__snapshots__/demo.spec.js.snap @@ -14,62 +14,27 @@ exports[`renders demo correctly 1`] = `
    • -
    密码为 6 位数字
    -
    -
    -
    -
    -
    1
    -
    -
    -
    2
    -
    -
    -
    3
    -
    -
    -
    4
    -
    -
    -
    5
    -
    -
    -
    6
    -
    -
    -
    7
    -
    -
    -
    8
    -
    -
    -
    9
    -
    -
    -
    - -
    -
    -
    -
    0
    -
    -
    -
    - -
    -
    -
    -
    +
    +
    +
    +
      +
      • +
      • +
      • +
      • +
      • -
      • -
      • -
      • +
      • +
      • +
      • +
      • +
    @@ -95,6 +60,53 @@ exports[`renders demo correctly 1`] = `
    • +
    密码为 6 位数字
    + + +
    +
    +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +
    4
    +
    +
    +
    5
    +
    +
    +
    6
    +
    +
    +
    7
    +
    +
    +
    8
    +
    +
    +
    9
    +
    +
    +
    + +
    +
    +
    +
    0
    +
    +
    +
    + +
    +
    +