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删除
+
`;
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` | - | - |