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 位数字
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
密码为 6 位数字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+