[new feature] PasswordInput: add gutter prop

docs/markdown/v2-progress-tracking.md

@@ -116,6 +116,10 @@
 - 新增`left-icon`插槽
 - 新增`right-icon`插槽
 
+### PasswordInput
+
+- 新增`gutter`属性
+
 ### Popup
 
 - 新增`click`事件

packages/password-input/demo/index.vue

@@ -15,9 +15,18 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('removeMask')">
+    <demo-block :title="$t('customLength')">
       <van-password-input
         :value="value2"
+        :length="4"
+        gutter="15"
+        @focus="keyboard = 'value2'"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('removeMask')">
+      <van-password-input
+        :value="value3"
         :mask="false"
         @focus="keyboard = 'value2'"
       />
@@ -30,10 +39,12 @@ export default {
   i18n: {
     'zh-CN': {
       info: '密码为 6 位数字',
+      customLength: '自定义长度',
       removeMask: '明文展示'
     },
     'en-US': {
       info: 'Some tips',
+      customLength: 'Custom Length',
       removeMask: 'Remove Mask'
     }
   },
@@ -42,6 +53,7 @@ export default {
     return {
       value1: '123',
       value2: '123',
+      value3: '123',
       keyboard: 'value1'
     };
   },

packages/password-input/en-US.md

@@ -53,6 +53,17 @@ export default {
 }
 ```
 
+### Custom length
+
+```html
+<van-password-input
+  :value="value"
+  :length="4"
+  :gutter="15"
+  @focus="showKeyboard = true"
+/>
+```
+
 ### Without mask
 
 ```html
@@ -74,6 +85,7 @@ export default {
 | mask | Whether to mask value | `Boolean` | `true` |
 | info | Bottom info | `String` | - |
 | error-info | Bottom error info | `String` | - |
+| gutter | Gutter of input | `Number | String` | `0` |
 
 ### Events
 

packages/password-input/index.less

@@ -28,7 +28,6 @@
     display: flex;
     width: 100%;
     height: 50px;
-    background-color: @white;
 
     &::after {
       border-radius: 6px;
@@ -41,10 +40,7 @@
       font-size: 20px;
       line-height: 50px;
       text-align: center;
-
+      background-color: @white;
-      &:not(:first-of-type)::after {
-        border-left-width: 1px;
-      }
     }
 
     i {

packages/password-input/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, suffixPx } from '../utils';
 import { emit, inherit } from '../utils/functional';
 
 // Types
@@ -10,6 +10,7 @@ export type PasswordInputProps = {
   info?: string;
   value: string;
   length: number;
+  gutter: number;
   errorInfo?: string;
 };
 
@@ -26,13 +27,16 @@ function PasswordInput(
   const Points = [];
   for (let i = 0; i < props.length; i++) {
     const char = props.value[i];
+    const showBorder = i !== 0 && !props.gutter;
+
+    let style;
+    if (i !== 0 && props.gutter) {
+      style = { marginLeft: suffixPx(props.gutter) };
+    }
+
     Points.push(
-      <li class="van-hairline">
+      <li class={{ 'van-hairline--left': showBorder }} style={style}>
-        {props.mask ? (
+        {props.mask ? <i style={{ visibility: char ? 'visible' : 'hidden' }} /> : char}
-          <i style={{ visibility: char ? 'visible' : 'hidden' }} />
-        ) : (
-          char
-        )}
       </li>
     );
   }
@@ -40,7 +44,7 @@ function PasswordInput(
   return (
     <div class={bem()}>
       <ul
-        class={[bem('security'), 'van-hairline--surround']}
+        class={[bem('security'), { 'van-hairline--surround': !props.gutter }]}
         onTouchstart={(event: TouchEvent) => {
           event.stopPropagation();
           emit(ctx, 'focus', event);
@@ -49,9 +53,7 @@ function PasswordInput(
       >
         {Points}
       </ul>
-      {info && (
+      {info && <div class={bem(props.errorInfo ? 'error-info' : 'info')}>{info}</div>}
-        <div class={bem(props.errorInfo ? 'error-info' : 'info')}>{info}</div>
-      )}
     </div>
   );
 }
@@ -59,6 +61,7 @@ function PasswordInput(
 PasswordInput.props = {
   info: String,
   errorInfo: String,
+  gutter: [String, Number],
   mask: {
     type: Boolean,
     default: true

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

@@ -5,12 +5,12 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-password-input">
       <ul class="van-password-input__security van-hairline--surround">
-        <li class="van-hairline"><i style="visibility: visible;"></i></li>
+        <li class=""><i style="visibility: visible;"></i></li>
-        <li class="van-hairline"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
-        <li class="van-hairline"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
-        <li class="van-hairline"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
       </ul>
       <div class="van-password-input__info">密码为 6 位数字</div>
     </div>
@@ -18,15 +18,25 @@ exports[`renders demo correctly 1`] = `
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
+  <div>
+    <div class="van-password-input">
+      <ul class="van-password-input__security">
+        <li class=""><i style="visibility: visible;"></i></li>
+        <li class="" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
+        <li class="" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
+        <li class="" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li>
+      </ul>
+    </div>
+  </div>
   <div>
     <div class="van-password-input">
       <ul class="van-password-input__security van-hairline--surround">
-        <li class="van-hairline">1</li>
+        <li class="">1</li>
-        <li class="van-hairline">2</li>
+        <li class="van-hairline--left">2</li>
-        <li class="van-hairline">3</li>
+        <li class="van-hairline--left">3</li>
-        <li class="van-hairline"></li>
+        <li class="van-hairline--left"></li>
-        <li class="van-hairline"></li>
+        <li class="van-hairline--left"></li>
-        <li class="van-hairline"></li>
+        <li class="van-hairline--left"></li>
       </ul>
     </div>
   </div>

packages/password-input/zh-CN.md

@@ -52,10 +52,20 @@ export default {
 }
 ```
 
+### 自定义长度
+
+```html
+<van-password-input
+  :value="value"
+  :length="4"
+  :gutter="15"
+  @focus="showKeyboard = true"
+/>
+```
+
 ### 明文展示
 
 ```html
-<!-- 密码输入框 -->
 <van-password-input
   :value="value"
   :mask="false"
@@ -72,6 +82,7 @@ export default {
 | mask | 是否隐藏密码内容 | `Boolean` | `true` | 1.6.6 |
 | info | 输入框下方文字提示 | `String` | - | - |
 | error-info | 输入框下方错误提示 | `String` | - | - |
+| gutter | 输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` | `Number | String` | `0` | 2.0.0 |
 
 ### Events