add PasswordInput component

packages/index.js

@@ -26,6 +26,7 @@ import NavBar from './nav-bar';
 import NoticeBar from './notice-bar';
 import NumberKeyboard from './number-keyboard';
 import Panel from './panel';
+import PasswordInput from './password-input';
 import Picker from './picker';
 import Popup from './popup';
 import Progress from './progress';
@@ -78,6 +79,7 @@ const components = [
   NoticeBar,
   NumberKeyboard,
   Panel,
+  PasswordInput,
   Picker,
   Popup,
   Progress,
@@ -146,6 +148,7 @@ export {
   NoticeBar,
   NumberKeyboard,
   Panel,
+  PasswordInput,
   Picker,
   Popup,
   Progress,

packages/password-input/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="van-password-input">
+    <ul class="van-password-input__security van-hairline--surround" @touchstart.stop="$emit('focus')">
+      <li v-for="visibility in points" class="van-hairline">
+        <i :style="`visibility: ${visibility}`" />
+      </li>
+    </ul>
+    <div 
+      v-if="errorInfo || info" 
+      v-text="errorInfo || info" 
+      :class="errorInfo ? 'van-password-input__error-info' : 'van-password-input__info'"
+    />
+</div>
+</template>
+
+<script>
+export default {
+  name: 'van-password-input',
+
+  props: {
+    info: String,
+    errorInfo: String,
+    value: {
+      type: String,
+      default: ''
+    },
+    length: {
+      type: Number,
+      default: 6
+    }
+  },
+
+  computed: {
+    points() {
+      const arr = [];
+      for (let i = 0; i < this.length; i++) {
+        arr[i] = this.value[i] ? 'visible' : 'hidden';
+      }
+      return arr;
+    }
+  }
+};
+</script>

packages/vant-css/src/index.css

@@ -34,6 +34,7 @@
 @import './radio.css';
 @import './switch.css';
 @import './uploader.css';
+@import './password-input.css';
 @import './number-keyboard.css';
 
 /* action components */

packages/vant-css/src/password-input.css

@@ -0,0 +1,59 @@
+@import "./common/var.css";
+
+.van-password-input {
+  margin: 0 15px;
+  user-select: none;
+  position: relative;
+
+  &:focus {
+    outline: none;
+  }
+
+  &__info,
+  &__error-info {
+    font-size: 14px;
+    margin-top: 15px;
+    text-align: center;
+  }
+
+  &__info {
+    color: $gray-dark;
+  }
+
+  &__error-info {
+    color: $red;
+  }
+
+  &__security {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    background-color: $white;
+
+    &::after {
+      border-radius: 6px;
+    }
+
+    li {
+      flex: 1;
+      height: 100%;
+      position: relative;
+
+      &:not(:first-of-type)::after {
+        border-left-width: 1px;
+      }
+    }
+
+    i {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 10px;
+      height: 10px;
+      margin: -5px 0 0 -5px;
+      visibility: hidden;
+      border-radius: 100%;
+      background-color: $black;
+    }
+  }
+}