[new feature] PasswordInput: add mask prop (#2796)

packages/password-input/demo/index.vue

@@ -2,16 +2,24 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-password-input
-        :value="value"
+        :value="value1"
         :info="$t('info')"
-        @focus="showKeyboard = true"
+        @focus="keyboard = 'value1'"
       />
 
       <van-number-keyboard
-        :show="showKeyboard"
+        :show="!!keyboard"
         @input="onInput"
         @delete="onDelete"
-        @blur="showKeyboard = false"
+        @blur="keyboard = ''"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('removeMask')">
+      <van-password-input
+        :value="value2"
+        :mask="false"
+        @focus="keyboard = 'value2'"
       />
     </demo-block>
   </demo-section>
@@ -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',
+      value1: '123',
-      showKeyboard: true
+      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);
     }
   }
 };

packages/password-input/en-US.md

@@ -49,12 +49,23 @@ export default {
 }
 ```
 
+#### Without mask
+
+```html
+<van-password-input
+  :value="value"
+  :mask="false"
+  @focus="showKeyboard = true"
+/>
+```
+
 ### 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` | - |
 

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;

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<PasswordInputProps>
+) {
   const info = props.errorInfo || props.info;
 
   const Points = [];
   for (let i = 0; i < props.length; i++) {
+    const char = props.value[i];
     Points.push(
       <li class="van-hairline">
-        <i style={{ visibility: props.value[i] ? 'visible' : 'hidden' }} />
+        {props.mask ? (
+          <i style={{ visibility: char ? 'visible' : 'hidden' }} />
+        ) : (
+          char
+        )}
       </li>
     );
   }
@@ -19,7 +41,7 @@ function PasswordInput(h, props, slots, ctx) {
     <div class={bem()}>
       <ul
         class={[bem('security'), 'van-hairline--surround']}
-        onTouchstart={event => {
+        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<PasswordInputProps>(PasswordInput);

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

@@ -18,5 +18,17 @@ 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 van-hairline--surround">
+        <li class="van-hairline">1</li>
+        <li class="van-hairline">2</li>
+        <li class="van-hairline">3</li>
+        <li class="van-hairline"></li>
+        <li class="van-hairline"></li>
+        <li class="van-hairline"></li>
+      </ul>
+    </div>
+  </div>
 </div>
 `;

packages/password-input/zh-CN.md

@@ -49,12 +49,24 @@ export default {
 }
 ```
 
+#### 明文展示
+
+```html
+<!-- 密码输入框 -->
+<van-password-input
+  :value="value"
+  :mask="false"
+  @focus="showKeyboard = true"
+/>
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | value | 密码值 | `String` | `''` | - |
 | length | 密码最大长度 | `Number` | `6` | - |
+| mask | 是否隐藏密码内容 | `Boolean` | `true` | 1.6.6 |
 | info | 输入框下方文字提示 | `String` | - | - |
 | error-info | 输入框下方错误提示 | `String` | - | - |