docs(PasswordInput): adjust demo

src/password-input/demo/index.vue

@@ -1,48 +1,56 @@
 <template>
   <demo-section>
-    <demo-block :title="t('basicUsage')">
+    <demo-block ref="basicUsage" :title="t('basicUsage')">
       <van-password-input
-        :value="value1"
-        :info="t('info')"
-        :focused="keyboard === 'value1'"
-        @focus="keyboard = 'value1'"
-      />
-
-      <van-number-keyboard
-        :show="!!keyboard"
-        @input="onInput"
-        @delete="onDelete"
-        @blur="keyboard = ''"
+        :value="value.basicUsage"
+        :focused="current === 'basicUsage'"
+        @focus="current = 'basicUsage'"
       />
     </demo-block>
 
-    <demo-block :title="t('customLength')">
+    <demo-block ref="customLength" :title="t('customLength')">
       <van-password-input
-        :value="value2"
+        :value="value.customLength"
         :length="4"
-        gutter="15"
-        :focused="keyboard === 'value2'"
-        @focus="keyboard = 'value2'"
+        :focused="current === 'customLength'"
+        @focus="current = 'customLength'"
       />
     </demo-block>
 
-    <demo-block :title="t('removeMask')">
+    <demo-block ref="addGutter" :title="t('addGutter')">
+      <van-password-input
+        :value="value.addGutter"
+        :gutter="10"
+        :focused="current === 'addGutter'"
+        @focus="current = 'addGutter'"
+      />
+    </demo-block>
+
+    <demo-block ref="removeMask" :title="t('removeMask')">
       <van-password-input
-        :value="value3"
         :mask="false"
-        :focused="keyboard === 'value3'"
-        @focus="keyboard = 'value3'"
+        :value="value.removeMask"
+        :focused="current === 'removeMask'"
+        @focus="current = 'removeMask'"
       />
     </demo-block>
 
-    <demo-block :title="t('hintError')">
+    <demo-block ref="showInfo" :title="t('showInfo')">
       <van-password-input
-        :value="value4"
+        :info="t('info')"
+        :value="value.showInfo"
         :error-info="errorInfo"
-        :focused="keyboard === 'value4'"
-        @focus="keyboard = 'value4'"
+        :focused="current === 'showInfo'"
+        @focus="current = 'showInfo'"
       />
     </demo-block>
+
+    <van-number-keyboard
+      :show="!!current"
+      @blur="current = ''"
+      @input="onInput"
+      @delete="onDelete"
+    />
   </demo-section>
 </template>
 
@@ -51,46 +59,76 @@ export default {
   i18n: {
     'zh-CN': {
       info: '密码为 6 位数字',
-      customLength: '自定义长度',
-      removeMask: '明文展示',
-      hintError: '错误提示',
+      showInfo: '提示信息',
+      addGutter: '格子间距',
       errorInfo: '密码错误',
+      removeMask: '明文展示',
+      customLength: '自定义长度',
     },
     'en-US': {
       info: 'Some tips',
-      customLength: 'Custom Length',
-      removeMask: 'Remove Mask',
-      hintError: 'Hint Error',
+      showInfo: 'Show Info',
+      addGutter: 'Add Gutter',
       errorInfo: 'Password Mistake',
+      removeMask: 'Remove Mask',
+      customLength: 'Custom Length',
     },
   },
 
   data() {
     return {
-      value1: '123',
-      value2: '123',
-      value3: '123',
-      value4: '123',
-      keyboard: 'value1',
+      value: {
+        showInfo: '123',
+        addGutter: '123',
+        basicUsage: '123',
+        removeMask: '123',
+        customLength: '123',
+      },
+      current: 'basicUsage',
       errorInfo: '',
     };
   },
 
-  methods: {
-    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 = '';
+  watch: {
+    current(value) {
+      if (value) {
+        const el = this.$refs[value].$el;
+        const { top } = el.getBoundingClientRect();
+        window.scrollTo(0, window.pageYOffset + top);
       }
     },
+  },
 
+  methods: {
+    onInput(key) {
+      const { value, current } = this;
+      const maxlegnth = current === 'customLength' ? 4 : 6;
+      const newValue = (value[current] + key).slice(0, maxlegnth);
+
+      value[current] = newValue;
+
+      if (
+        current === 'showInfo' &&
+        newValue.length === 6 &&
+        newValue !== '123456'
+      ) {
+        this.errorInfo = this.t('errorInfo');
+      }
+    },
     onDelete() {
-      const { keyboard } = this;
-      this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1);
+      const { value, current } = this;
+      value[current] = value[current].slice(0, value[current].length - 1);
+
+      if (current === 'showInfo') {
+        this.errorInfo = '';
+      }
     },
   },
 };
 </script>
+
+<style lang="less">
+.demo-password-input {
+  min-height: 140vh;
+}
+</style>