Skip to content

Commit 3264825

Browse files
chenjiahanchenjiahan
authored
feat(NumberKeyboard): add focused prop (youzan#4279)
1 parent 667c4f6 commit 3264825

7 files changed

Lines changed: 47 additions & 1 deletion

File tree

‎src/password-input/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Vue.use(PasswordInput).use(NumberKeyboard);
2222
<van-password-input
2323
:value="value"
2424
info="Some tips"
25+
:focused="showKeyboard"
2526
@focus="showKeyboard = true"
2627
/>
2728

@@ -61,6 +62,7 @@ export default {
6162
:value="value"
6263
:length="4"
6364
:gutter="15"
65+
:focused="showKeyboard"
6466
@focus="showKeyboard = true"
6567
/>
6668
```
@@ -71,6 +73,7 @@ export default {
7173
<van-password-input
7274
:value="value"
7375
:mask="false"
76+
:focused="showKeyboard"
7477
@focus="showKeyboard = true"
7578
/>
7679
```
@@ -84,6 +87,7 @@ export default {
8487
| value | Password value | *string* | `''` | - |
8588
| length | Maxlength of password | *number* | `6` | - |
8689
| mask | Whether to mask value | *boolean* | `true` | - |
90+
| focused | Whether to show focused cursor | *boolean* | `false` | 2.1.8 |
8791
| info | Bottom info | *string* | - | - |
8892
| error-info | Bottom error info | *string* | - | - |
8993
| gutter | Gutter of input | *string \| number* | `0` | - |

‎src/password-input/README.zh-CN.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Vue.use(PasswordInput).use(NumberKeyboard);
2222
<van-password-input
2323
:value="value"
2424
info="密码为 6 位数字"
25+
:focused="showKeyboard"
2526
@focus="showKeyboard = true"
2627
/>
2728

@@ -61,6 +62,7 @@ export default {
6162
:value="value"
6263
:length="4"
6364
:gutter="15"
65+
:focused="showKeyboard"
6466
@focus="showKeyboard = true"
6567
/>
6668
```
@@ -71,6 +73,7 @@ export default {
7173
<van-password-input
7274
:value="value"
7375
:mask="false"
76+
:focused="showKeyboard"
7477
@focus="showKeyboard = true"
7578
/>
7679
```
@@ -82,6 +85,7 @@ export default {
8285
| value | 密码值 | *string* | `''` | - |
8386
| length | 密码最大长度 | *number* | `6` | - |
8487
| mask | 是否隐藏密码内容 | *boolean* | `true` | - |
88+
| focused | 是否已聚焦，聚焦时会显示光标 | *boolean* | `false` | 2.1.8 |
8589
| info | 输入框下方文字提示 | *string* | - | - |
8690
| error-info | 输入框下方错误提示 | *string* | - | - |
8791
| gutter | 输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` | *string \| number* | `0` | - |

‎src/password-input/demo/index.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<van-password-input
55
:value="value1"
66
:info="$t('info')"
7+
:focused="keyboard === 'value1'"
78
@focus="keyboard = 'value1'"
89
/>
910

@@ -20,6 +21,7 @@
2021
:value="value2"
2122
:length="4"
2223
gutter="15"
24+
:focused="keyboard === 'value2'"
2325
@focus="keyboard = 'value2'"
2426
/>
2527
</demo-block>
@@ -28,6 +30,7 @@
2830
<van-password-input
2931
:value="value3"
3032
:mask="false"
33+
:focused="keyboard === 'value3'"
3134
@focus="keyboard = 'value3'"
3235
/>
3336
</demo-block>

‎src/password-input/index.less‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,29 @@
5151
visibility: hidden;
5252
}
5353
}
54+
55+
&__cursor {
56+
position: absolute;
57+
top: 50%;
58+
left: 50%;
59+
width: @number-keyboard-cursor-width;
60+
height: @number-keyboard-cursor-height;
61+
background-color: @number-keyboard-cursor-color;
62+
transform: translate(-50%, -50%);
63+
animation: @number-keyboard-cursor-animation-duration van-cursor-flicker infinite;
64+
}
65+
}
66+
67+
@keyframes van-cursor-flicker {
68+
from {
69+
opacity: 0;
70+
}
71+
72+
50% {
73+
opacity: 1;
74+
}
75+
76+
100% {
77+
opacity: 0;
78+
}
5479
}

‎src/password-input/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type PasswordInputProps = {
1212
value: string;
1313
length: number;
1414
gutter: number;
15+
focused?: boolean;
1516
errorInfo?: string;
1617
};
1718

@@ -29,6 +30,7 @@ function PasswordInput(
2930
for (let i = 0; i < props.length; i++) {
3031
const char = props.value[i];
3132
const showBorder = i !== 0 && !props.gutter;
33+
const showCursor = props.focused && i === props.value.length;
3234

3335
let style;
3436
if (i !== 0 && props.gutter) {
@@ -38,6 +40,7 @@ function PasswordInput(
3840
Points.push(
3941
<li class={{ [BORDER_LEFT]: showBorder }} style={style}>
4042
{props.mask ? <i style={{ visibility: char ? 'visible' : 'hidden' }} /> : char}
43+
{showCursor && <div class={bem('cursor')} />}
4144
</li>
4245
);
4346
}
@@ -62,6 +65,7 @@ function PasswordInput(
6265
PasswordInput.props = {
6366
info: String,
6467
gutter: [Number, String],
68+
focused: Boolean,
6569
errorInfo: String,
6670
mask: {
6771
type: Boolean,

‎src/password-input/test/__snapshots__/demo.spec.js.snap‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ exports[`renders demo correctly 1`] = `
88
<li class=""><i style="visibility: visible;"></i></li>
99
<li class="van-hairline--left"><i style="visibility: visible;"></i></li>
1010
<li class="van-hairline--left"><i style="visibility: visible;"></i></li>
11-
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
11+
<li class="van-hairline--left"><i style="visibility: hidden;"></i>
12+
<div class="van-password-input__cursor"></div>
13+
</li>
1214
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
1315
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
1416
</ul>

‎src/style/var.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,10 @@
380380
@number-keyboard-close-font-size: @font-size-md;
381381
@number-keyboard-button-text-color: @white;
382382
@number-keyboard-button-background-color: @blue;
383+
@number-keyboard-cursor-color: @text-color;
384+
@number-keyboard-cursor-width: 1px;
385+
@number-keyboard-cursor-height: 40%;
386+
@number-keyboard-cursor-animation-duration: 1s;
383387

384388
// Overlay
385389
@overlay-background-color: rgba(0, 0, 0, 0.7);

0 commit comments

Comments
 (0)