docs(ContactList): use composition api

2020-12-13 14:28:02 +08:00
parent 03e65d9427
commit 540ffb6a4c
4 changed files with 102 additions and 81 deletions
@@ -11,65 +11,74 @@
  </demo-block>
 </template>

-<script>
+<script lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    add: '新增',
+    edit: '编辑',
+    list: [
+      {
+        id: '1',
+        name: '张三',
+        tel: '13000000000',
+        isDefault: true,
+      },
+      {
+        id: '2',
+        name: '李四',
+        tel: '1310000000',
+      },
+    ],
+    select: '选择',
+    defaultTagText: '默认',
+  },
+  'en-US': {
+    add: 'Add',
+    edit: 'Edit',
+    list: [
+      {
+        id: '1',
+        name: 'John Snow',
+        tel: '13000000000',
+        isDefault: true,
+      },
+      {
+        id: '2',
+        name: 'Ned Stark',
+        tel: '1310000000',
+      },
+    ],
+    select: 'Select',
+    defaultTagText: 'default',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      add: '新增',
-      edit: '编辑',
-      list: [
-        {
-          id: '1',
-          name: '张三',
-          tel: '13000000000',
-          isDefault: true,
-        },
-        {
-          id: '2',
-          name: '李四',
-          tel: '1310000000',
-        },
-      ],
-      select: '选择',
-      defaultTagText: '默认',
-    },
-    'en-US': {
-      add: 'Add',
-      edit: 'Edit',
-      list: [
-        {
-          id: '1',
-          name: 'John Snow',
-          tel: '13000000000',
-          isDefault: true,
-        },
-        {
-          id: '2',
-          name: 'Ned Stark',
-          tel: '1310000000',
-        },
-      ],
-      select: 'Select',
-      defaultTagText: 'default',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const chosenContactId = ref('1');

-  data() {
-    return {
-      chosenContactId: '1',
+    const onAdd = () => {
+      Toast(t('add'));
+    };
+    const onEdit = (contact: { id: string }) => {
+      Toast(t('edit') + contact.id);
+    };
+    const onSelect = (contact: { id: string }) => {
+      Toast(t('select') + contact.id);
    };
-  },

-  methods: {
-    onAdd() {
-      this.$toast(this.t('add'));
-    },
-    onEdit(contact) {
-      this.$toast(this.t('edit') + contact.id);
-    },
-    onSelect(contact) {
-      this.$toast(this.t('select') + contact.id);
-    },
+    return {
+      t,
+      onAdd,
+      onEdit,
+      onSelect,
+      chosenContactId,
+    };
  },
 };
 </script>