feat(NumberKeyboard): add focused prop (#4279)

src/password-input/README.md

@@ -22,6 +22,7 @@ Vue.use(PasswordInput).use(NumberKeyboard);
 <van-password-input
   :value="value"
   info="Some tips"
+  :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
 
@@ -61,6 +62,7 @@ export default {
   :value="value"
   :length="4"
   :gutter="15"
+  :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
 ```
@@ -71,6 +73,7 @@ export default {
 <van-password-input
   :value="value"
   :mask="false"
+  :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
 ```
@@ -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` | - |

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

@@ -22,6 +22,7 @@ Vue.use(PasswordInput).use(NumberKeyboard);
 <van-password-input
   :value="value"
   info="密码为 6 位数字"
+  :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
 
@@ -61,6 +62,7 @@ export default {
   :value="value"
   :length="4"
   :gutter="15"
+  :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
 ```
@@ -71,6 +73,7 @@ export default {
 <van-password-input
   :value="value"
   :mask="false"
+  :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
 ```
@@ -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` | - |

src/password-input/demo/index.vue

@@ -4,6 +4,7 @@
       <van-password-input
         :value="value1"
         :info="$t('info')"
+        :focused="keyboard === 'value1'"
         @focus="keyboard = 'value1'"
       />
 
@@ -20,6 +21,7 @@
         :value="value2"
         :length="4"
         gutter="15"
+        :focused="keyboard === 'value2'"
         @focus="keyboard = 'value2'"
       />
     </demo-block>
@@ -28,6 +30,7 @@
       <van-password-input
         :value="value3"
         :mask="false"
+        :focused="keyboard === 'value3'"
         @focus="keyboard = 'value3'"
       />
     </demo-block>

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;
+  }
 }

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(
       <li class={{ [BORDER_LEFT]: showBorder }} style={style}>
         {props.mask ? <i style={{ visibility: char ? 'visible' : 'hidden' }} /> : char}
+        {showCursor && <div class={bem('cursor')} />}
       </li>
     );
   }
@@ -62,6 +65,7 @@ function PasswordInput(
 PasswordInput.props = {
   info: String,
   gutter: [Number, String],
+  focused: Boolean,
   errorInfo: String,
   mask: {
     type: Boolean,

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

@@ -8,7 +8,9 @@ exports[`renders demo correctly 1`] = `
         <li class=""><i style="visibility: visible;"></i></li>
         <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
         <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: hidden;"></i>
+          <div class="van-password-input__cursor"></div>
+        </li>
         <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
         <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
       </ul>

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);