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',
-        name: 'John Snow',
+      tel: '13000000000',
-        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: '张三',
-        name: '张三',
+      tel: '13000000000',
-        tel: '13000000000',
+    });
-      },
+
+    const onEdit = () => {
+      Toast('edit');
+    };
+
+    return {
+      onEdit,
+      currentContact,
     };
-  },
-  methods: {
-    onEdit() {
-      Toast('编辑');
-    },
   },
 };
 ```

src/contact-card/demo/index.vue

@@ -22,44 +22,51 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { computed } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
+const i18n = {
+  'zh-CN': {
+    add: '新增',
+    edit: '编辑',
+    name: '张三',
+    addContact: '添加联系人',
+    editContact: '编辑联系人',
+  },
+  'en-US': {
+    add: 'Add',
+    edit: 'Edit',
+    name: 'John Snow',
+    addContact: 'Add Contact',
+    editContact: 'Edit Contact',
+  },
+};
+
 export default {
-  i18n: {
+  setup() {
-    'zh-CN': {
+    const t = useTranslate(i18n);
-      add: '新增',
-      edit: '编辑',
-      name: '张三',
-      addContact: '添加联系人',
-      editContact: '编辑联系人',
-    },
-    'en-US': {
-      add: 'Add',
-      edit: 'Edit',
-      name: 'John Snow',
-      addContact: 'Add Contact',
-      editContact: 'Edit Contact',
-    },
-  },
 
-  computed: {
+    const currentContact = computed(() => ({
-    currentContact() {
+      name: t('name'),
-      return {
+      tel: '13000000000',
-        name: this.t('name'),
+    }));
-        tel: '13000000000',
-      };
-    },
-  },
 
-  methods: {
+    const onAdd = () => {
-    onAdd() {
+      Toast(t('add'));
-      Toast(this.t('add'));
+    };
-    },
 
-    onEdit() {
+    const onEdit = () => {
-      Toast(this.t('edit'));
+      Toast(t('edit'));
-    },
+    };
+
+    return {
+      t,
+      onAdd,
+      onEdit,
+      currentContact,
+    };
   },
 };
 </script>