docs(Form): use composition api

src/form/demo/BasicUsage.vue

@@ -16,7 +16,7 @@
         :rules="[{ required: true, message: t('requirePassword') }]"
         :placeholder="t('password')"
       />
-      <div style="margin: 16px 16px 0;">
+      <div style="margin: 16px 16px 0">
         <van-button round block type="primary" native-type="submit">
           {{ t('submit') }}
         </van-button>
@@ -26,38 +26,47 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      submit: '提交',
-      username: '用户名',
-      password: '密码',
-      requireUsername: '请填写用户名',
-      requirePassword: '请填写密码',
-    },
-    'en-US': {
-      submit: 'Submit',
-      username: 'Username',
-      password: 'Password',
-      requireUsername: 'Username is required',
-      requirePassword: 'Password is required',
-    },
-  },
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    submit: '提交',
+    username: '用户名',
+    password: '密码',
+    requireUsername: '请填写用户名',
+    requirePassword: '请填写密码',
+  },
+  'en-US': {
+    submit: 'Submit',
+    username: 'Username',
+    password: 'Password',
+    requireUsername: 'Username is required',
+    requirePassword: 'Password is required',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       username: '',
       password: '',
-    };
-  },
+    });
 
-  methods: {
-    onSubmit(values) {
+    const onSubmit = (values) => {
       console.log('submit', values);
-    },
-    onFailed(errorInfo) {
+    };
+    const onFailed = (errorInfo) => {
       console.log('failed', errorInfo);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onSubmit,
+      onFailed,
+    };
   },
 };
 </script>