feat: add multiple examples (#5564)

src/password-input/README.md

@@ -78,6 +78,53 @@ export default {
 />
 ```
 
+### Hint Error
+
+Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits
+
+```html
+<!-- PasswordInput -->
+<van-password-input
+  :value="value"
+  :error-info="errorInfo"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+
+<!-- NumberKeyboard -->
+<van-number-keyboard
+  :show="showKeyboard"
+  @input="onInput"
+  @delete="onDelete"
+  @blur="showKeyboard = false"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: '123',
+      showKeyboard: true,
+      errorInfo: ''
+    };
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+      if (this.value.length === 6) {
+        this.errorInfo = 'Password Mistake';
+      } else {
+        this.errorInfo = '';
+      }
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+```
 ## API
 
 ### Props

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

@@ -78,6 +78,54 @@ export default {
 />
 ```
 
+### 错误提示
+
+通过`error-info`属性可以设置错误提示信息，例如当输入六位时提示密码错误
+
+```html
+<!-- 密码输入框 -->
+<van-password-input
+  :value="value"
+  :error-info="errorInfo"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+
+<!-- 数字键盘 -->
+<van-number-keyboard
+  :show="showKeyboard"
+  @input="onInput"
+  @delete="onDelete"
+  @blur="showKeyboard = false"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: '123',
+      showKeyboard: true,
+      errorInfo: ''
+    };
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+      if (this.value.length === 6) {
+        this.errorInfo = '密码错误';
+      } else {
+        this.errorInfo = '';
+      }
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+```
+
 ## API
 
 ### Props

src/password-input/demo/index.vue

@@ -34,6 +34,15 @@
         @focus="keyboard = 'value3'"
       />
     </demo-block>
+
+    <demo-block :title="$t('hintError')">
+      <van-password-input
+        :value="value4"
+        :error-info="errorInfo"
+        :focused="keyboard === 'value4'"
+        @focus="keyboard = 'value4'"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -43,12 +52,16 @@ export default {
     'zh-CN': {
       info: '密码为 6 位数字',
       customLength: '自定义长度',
-      removeMask: '明文展示'
+      removeMask: '明文展示',
+      hintError: '错误提示',
+      errorInfo: '密码错误'
     },
     'en-US': {
       info: 'Some tips',
       customLength: 'Custom Length',
-      removeMask: 'Remove Mask'
+      removeMask: 'Remove Mask',
+      hintError: 'Hint Error',
+      errorInfo: 'Password Mistake'
     }
   },
 
@@ -57,7 +70,9 @@ export default {
       value1: '123',
       value2: '123',
       value3: '123',
-      keyboard: 'value1'
+      value4: '123',
+      keyboard: 'value1',
+      errorInfo: ''
     };
   },
 
@@ -65,6 +80,11 @@ export default {
     onInput(key) {
       const { keyboard } = this;
       this[keyboard] = (this[keyboard] + key).slice(0, 6);
+      if (this[keyboard].length === 6) {
+        this.errorInfo = this.$t('errorInfo');
+      } else {
+        this.errorInfo = '';
+      }
     },
 
     onDelete() {

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

@@ -42,5 +42,17 @@ exports[`renders demo correctly 1`] = `
       </ul>
     </div>
   </div>
+  <div>
+    <div class="van-password-input">
+      <ul class="van-password-input__security van-hairline--surround">
+        <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></li>
+        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
+      </ul>
+    </div>
+  </div>
 </div>
 `;