docs(PasswordInput): use composition api

src/password-input/README.md

@@ -33,11 +33,16 @@ app.use(NumberKeyboard);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const value = ref('123');
+    const showKeyboard = ref(true);
+
     return {
-      value: '123',
+      value,
-      showKeyboard: true,
+      showKeyboard,
     };
   },
 };
@@ -96,22 +101,27 @@ Use `info` to set info message, use `error-info` prop to set error message.
 ```
 
 ```js
+import { ref, watch } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const value = ref('123');
-      value: '123',
+    const errorInfo = ref('');
-      errorInfo: '',
+    const showKeyboard = ref(true);
-      showKeyboard: true,
+
-    };
+    watch(value, (newVal) => {
-  },
+      if (newVal.length === 6 && newVal !== '123456') {
-  watch: {
+        errorInfo.value = 'Password Mistake';
-    value(value) {
-      if (value.length === 6 && value !== '123456') {
-        this.errorInfo = 'Password Mistake';
       } else {
-        this.errorInfo = '';
+        errorInfo.value = '';
       }
-    },
+    });
+
+    return {
+      value,
+      errorInfo,
+      showKeyboard,
+    };
   },
 };
 ```

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

@@ -37,11 +37,16 @@ app.use(NumberKeyboard);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const value = ref('123');
+    const showKeyboard = ref(true);
+
     return {
-      value: '123',
+      value,
-      showKeyboard: true,
+      showKeyboard,
     };
   },
 };
@@ -106,22 +111,27 @@ export default {
 ```
 
 ```js
+import { ref, watch } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const value = ref('123');
-      value: '123',
+    const errorInfo = ref('');
-      errorInfo: '',
+    const showKeyboard = ref(true);
-      showKeyboard: true,
+
-    };
+    watch(value, (newVal) => {
-  },
+      if (newVal.length === 6 && newVal !== '123456') {
-  watch: {
+        errorInfo.value = '密码错误';
-    value(value) {
-      if (value.length === 6 && value !== '123456') {
-        this.errorInfo = '密码错误';
       } else {
-        this.errorInfo = '';
+        errorInfo.value = '';
       }
-    },
+    });
+
+    return {
+      value,
+      errorInfo,
+      showKeyboard,
+    };
   },
 };
 ```

src/password-input/demo/index.vue

@@ -52,9 +52,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { ComponentPublicInstance, reactive, ref, toRefs, watch } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     info: '密码为 6 位数字',
     showInfo: '提示信息',
@@ -71,35 +73,37 @@ export default {
     removeMask: 'Remove Mask',
     customLength: 'Custom Length',
   },
-  },
+};
 
-  data() {
+export default {
-    return {
+  setup() {
-      value: {
+    const t = useTranslate(i18n);
+    const initialValue = {
       showInfo: '123',
       addGutter: '123',
       basicUsage: '123',
       removeMask: '123',
       customLength: '123',
-      },
-      current: 'basicUsage',
-      errorInfo: '',
     };
-  },
 
-  watch: {
+    const refMap = {
-    current(value) {
+      showInfo: ref<ComponentPublicInstance>(),
-      if (value) {
+      addGutter: ref<ComponentPublicInstance>(),
-        const el = this.$refs[value].$el;
+      basicUsage: ref<ComponentPublicInstance>(),
-        const { top } = el.getBoundingClientRect();
+      removeMask: ref<ComponentPublicInstance>(),
-        window.scrollTo(0, window.pageYOffset + top);
+      customLength: ref<ComponentPublicInstance>(),
-      }
+    };
-    },
-  },
 
-  methods: {
+    type ValueKeys = keyof typeof initialValue;
-    onInput(key) {
+
-      const { value, current } = this;
+    const state = reactive({
+      value: initialValue,
+      current: 'basicUsage' as ValueKeys,
+      errorInfo: '',
+    });
+
+    const onInput = (key: ValueKeys) => {
+      const { value, current } = state;
       const maxlegnth = current === 'customLength' ? 4 : 6;
       const newValue = (value[current] + key).slice(0, maxlegnth);
 
@@ -110,23 +114,45 @@ export default {
         newValue.length === 6 &&
         newValue !== '123456'
       ) {
-        this.errorInfo = this.t('errorInfo');
+        state.errorInfo = t('errorInfo');
       }
-    },
+    };
-    onDelete() {
+
-      const { value, current } = this;
+    const onDelete = () => {
+      const { value, current } = state;
       value[current] = value[current].slice(0, value[current].length - 1);
 
       if (current === 'showInfo') {
-        this.errorInfo = '';
+        state.errorInfo = '';
       }
-    },
+    };
+
+    watch(
+      () => state.current,
+      (value) => {
+        if (value) {
+          const vm = refMap[value].value;
+          if (vm) {
+            const { top } = vm.$el.getBoundingClientRect();
+            window.scrollTo(0, window.pageYOffset + top);
+          }
+        }
+      }
+    );
+
+    return {
+      ...toRefs(state),
+      ...refMap,
+      t,
+      onInput,
+      onDelete,
+    };
   },
 };
 </script>
 
 <style lang="less">
 .demo-password-input {
-  min-height: 140vh;
+  min-height: 150vh;
 }
 </style>