docs(ContactCard): use composition api

src/contact-card/README.md

@@ -42,21 +42,24 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const currentContact = reactive({
-      currentContact: {
       name: 'John Snow',
       tel: '13000000000',
-      },
+    });
-    };
+
-  },
+    const onEdit = () => {
-  methods: {
-    onEdit() {
       Toast('edit');
-    },
+    };
+
+    return {
+      onEdit,
+      currentContact,
+    };
   },
 };
 ```

src/contact-card/README.zh-CN.md

@@ -46,21 +46,24 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const currentContact = reactive({
-      currentContact: {
       name: '张三',
       tel: '13000000000',
-      },
+    });
+
+    const onEdit = () => {
+      Toast('edit');
+    };
+
+    return {
+      onEdit,
+      currentContact,
     };
-  },
-  methods: {
-    onEdit() {
-      Toast('编辑');
-    },
   },
 };
 ```

src/contact-card/demo/index.vue

@@ -22,11 +22,12 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { computed } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     add: '新增',
     edit: '编辑',
@@ -41,25 +42,31 @@ export default {
     addContact: 'Add Contact',
     editContact: 'Edit Contact',
   },
-  },
+};
 
-  computed: {
+export default {
-    currentContact() {
+  setup() {
-      return {
+    const t = useTranslate(i18n);
-        name: this.t('name'),
+
+    const currentContact = computed(() => ({
+      name: t('name'),
       tel: '13000000000',
+    }));
+
+    const onAdd = () => {
+      Toast(t('add'));
     };
-    },
-  },
 
-  methods: {
+    const onEdit = () => {
-    onAdd() {
+      Toast(t('edit'));
-      Toast(this.t('add'));
+    };
-    },
 
-    onEdit() {
+    return {
-      Toast(this.t('edit'));
+      t,
-    },
+      onAdd,
+      onEdit,
+      currentContact,
+    };
   },
 };
 </script>