docs(NumberKeyboard): use composition api

src/number-keyboard/README.md

@@ -25,21 +25,24 @@ app.use(NumberKeyboard);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const show = ref(true);
-      show: true,
+    const onInput = (value) => {
-    };
-  },
-  methods: {
-    onInput(value) {
       Toast(value);
-    },
+    };
-    onDelete() {
+    const onDelete = () => {
       Toast('delete');
-    },
+    };
+
+    return {
+      show,
+      onInput,
+      onDelete,
+    };
   },
 };
 ```
@@ -125,11 +128,15 @@ Use `title` prop to set keyboard title.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(true);
+    const value = ref('');
     return {
-      show: false,
+      show,
-      value: '',
+      value,
     };
   },
 };

src/number-keyboard/README.zh-CN.md

@@ -31,21 +31,24 @@ app.use(NumberKeyboard);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const show = ref(true);
-      show: true,
+    const onInput = (value) => {
-    };
-  },
-  methods: {
-    onInput(value) {
       Toast(value);
-    },
+    };
-    onDelete() {
+    const onDelete = () => {
       Toast('删除');
-    },
+    };
+
+    return {
+      show,
+      onInput,
+      onDelete,
+    };
   },
 };
 ```
@@ -138,11 +141,15 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(true);
+    const value = ref('');
     return {
-      show: false,
+      show,
-      value: '',
+      value,
     };
   },
 };

src/number-keyboard/demo/index.vue

@@ -77,9 +77,12 @@
   />
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { reactive, toRefs } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
+
+const i18n = {
   'zh-CN': {
     close: '完成',
     input: '输入',
@@ -108,23 +111,30 @@ export default {
     extraKey: 'IdNumber Keyboard',
     multiExtraKey: 'Multiple ExtraKey',
   },
-  },
+};
 
-  data() {
+export default {
-    return {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       value: '',
       keyboard: 'default',
+    });
+
+    const onInput = (value: string) => {
+      Toast(`${t('input')}: ${value}`);
     };
-  },
 
-  methods: {
+    const onDelete = () => {
-    onInput(value) {
+      Toast(t('delete'));
-      this.$toast(`${this.t('input')}: ${value}`);
+    };
-    },
 
-    onDelete() {
+    return {
-      this.$toast(this.t('delete'));
+      ...toRefs(state),
-    },
+      t,
+      onInput,
+      onDelete,
+    };
   },
 };
 </script>