diff --git a/src/password-input/README.md b/src/password-input/README.md
index e8e21ac8b..afcb4c15d 100644
--- a/src/password-input/README.md
+++ b/src/password-input/README.md
@@ -22,6 +22,7 @@ Vue.use(PasswordInput).use(NumberKeyboard);
@@ -61,6 +62,7 @@ export default {
:value="value"
:length="4"
:gutter="15"
+ :focused="showKeyboard"
@focus="showKeyboard = true"
/>
```
@@ -71,6 +73,7 @@ export default {
```
@@ -84,6 +87,7 @@ export default {
| value | Password value | *string* | `''` | - |
| length | Maxlength of password | *number* | `6` | - |
| mask | Whether to mask value | *boolean* | `true` | - |
+| focused | Whether to show focused cursor | *boolean* | `false` | 2.1.8 |
| info | Bottom info | *string* | - | - |
| error-info | Bottom error info | *string* | - | - |
| gutter | Gutter of input | *string \| number* | `0` | - |
diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md
index 76b53cb7f..70a1b0fbf 100644
--- a/src/password-input/README.zh-CN.md
+++ b/src/password-input/README.zh-CN.md
@@ -22,6 +22,7 @@ Vue.use(PasswordInput).use(NumberKeyboard);
@@ -61,6 +62,7 @@ export default {
:value="value"
:length="4"
:gutter="15"
+ :focused="showKeyboard"
@focus="showKeyboard = true"
/>
```
@@ -71,6 +73,7 @@ export default {
```
@@ -82,6 +85,7 @@ export default {
| value | 密码值 | *string* | `''` | - |
| length | 密码最大长度 | *number* | `6` | - |
| mask | 是否隐藏密码内容 | *boolean* | `true` | - |
+| focused | 是否已聚焦,聚焦时会显示光标 | *boolean* | `false` | 2.1.8 |
| info | 输入框下方文字提示 | *string* | - | - |
| error-info | 输入框下方错误提示 | *string* | - | - |
| gutter | 输入框格子之间的间距,如 `20px` `2em`,默认单位为`px` | *string \| number* | `0` | - |
diff --git a/src/password-input/demo/index.vue b/src/password-input/demo/index.vue
index 2046836b4..41f3c25b2 100644
--- a/src/password-input/demo/index.vue
+++ b/src/password-input/demo/index.vue
@@ -4,6 +4,7 @@
@@ -20,6 +21,7 @@
:value="value2"
:length="4"
gutter="15"
+ :focused="keyboard === 'value2'"
@focus="keyboard = 'value2'"
/>
@@ -28,6 +30,7 @@
diff --git a/src/password-input/index.less b/src/password-input/index.less
index 07742a8ed..0de8ff301 100644
--- a/src/password-input/index.less
+++ b/src/password-input/index.less
@@ -51,4 +51,29 @@
visibility: hidden;
}
}
+
+ &__cursor {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: @number-keyboard-cursor-width;
+ height: @number-keyboard-cursor-height;
+ background-color: @number-keyboard-cursor-color;
+ transform: translate(-50%, -50%);
+ animation: @number-keyboard-cursor-animation-duration van-cursor-flicker infinite;
+ }
+}
+
+@keyframes van-cursor-flicker {
+ from {
+ opacity: 0;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
}
diff --git a/src/password-input/index.tsx b/src/password-input/index.tsx
index 0bc8232fb..bb838373f 100644
--- a/src/password-input/index.tsx
+++ b/src/password-input/index.tsx
@@ -12,6 +12,7 @@ export type PasswordInputProps = {
value: string;
length: number;
gutter: number;
+ focused?: boolean;
errorInfo?: string;
};
@@ -29,6 +30,7 @@ function PasswordInput(
for (let i = 0; i < props.length; i++) {
const char = props.value[i];
const showBorder = i !== 0 && !props.gutter;
+ const showCursor = props.focused && i === props.value.length;
let style;
if (i !== 0 && props.gutter) {
@@ -38,6 +40,7 @@ function PasswordInput(
Points.push(
{props.mask ? : char}
+ {showCursor && }
);
}
@@ -62,6 +65,7 @@ function PasswordInput(
PasswordInput.props = {
info: String,
gutter: [Number, String],
+ focused: Boolean,
errorInfo: String,
mask: {
type: Boolean,
diff --git a/src/password-input/test/__snapshots__/demo.spec.js.snap b/src/password-input/test/__snapshots__/demo.spec.js.snap
index dfec97366..b95d43c4f 100644
--- a/src/password-input/test/__snapshots__/demo.spec.js.snap
+++ b/src/password-input/test/__snapshots__/demo.spec.js.snap
@@ -8,7 +8,9 @@ exports[`renders demo correctly 1`] = `
-
+
+
+
diff --git a/src/style/var.less b/src/style/var.less
index 8c3588941..db016d59b 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -380,6 +380,10 @@
@number-keyboard-close-font-size: @font-size-md;
@number-keyboard-button-text-color: @white;
@number-keyboard-button-background-color: @blue;
+@number-keyboard-cursor-color: @text-color;
+@number-keyboard-cursor-width: 1px;
+@number-keyboard-cursor-height: 40%;
+@number-keyboard-cursor-animation-duration: 1s;
// Overlay
@overlay-background-color: rgba(0, 0, 0, 0.7);