From f93e21a0994eb1f26d653b9f6ad1b77410f2b11f Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 12:51:02 +0800
Subject: [PATCH] docs(Skeleton): use composition api

---
 src/skeleton/README.md       | 15 ++++++++-----
 src/skeleton/README.zh-CN.md | 15 ++++++++-----
 src/skeleton/demo/index.vue  | 43 +++++++++++++++++++++---------------
 3 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/skeleton/README.md b/src/skeleton/README.md
index 4f2b2cc4d..ee90f46f6 100644
--- a/src/skeleton/README.md
+++ b/src/skeleton/README.md
@@ -33,15 +33,20 @@ app.use(Skeleton);
 ```
 
 ```js
+import { ref, onMounted } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const loading = ref(true);
+
+    onMounted(() => {
+      loading.value = false;
+    });
+
     return {
-      loading: true,
+      loading,
     };
   },
-  mounted() {
-    this.loading = false;
-  },
 };
 ```
 
diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md
index 3547169d3..8e57da672 100644
--- a/src/skeleton/README.zh-CN.md
+++ b/src/skeleton/README.zh-CN.md
@@ -43,15 +43,20 @@ app.use(Skeleton);
 ```
 
 ```js
+import { ref, onMounted } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const loading = ref(true);
+
+    onMounted(() => {
+      loading.value = false;
+    });
+
     return {
-      loading: true,
+      loading,
     };
   },
-  mounted() {
-    this.loading = false;
-  },
 };
 ```
 
diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue
index ba3b6d2c9..ad8758359 100644
--- a/src/skeleton/demo/index.vue
+++ b/src/skeleton/demo/index.vue
@@ -22,26 +22,33 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      showAvatar: '显示头像',
-      showChildren: '显示子组件',
-      title: '关于 Vant',
-      desc:
-        'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
-    },
-    'en-US': {
-      showAvatar: 'Show Avatar',
-      showChildren: 'Show Children',
-      title: 'About Vant',
-      desc: 'Vant is a set of Mobile UI Components built on Vue.',
-    },
-  },
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    showAvatar: '显示头像',
+    showChildren: '显示子组件',
+    title: '关于 Vant',
+    desc:
+      'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
+  },
+  'en-US': {
+    showAvatar: 'Show Avatar',
+    showChildren: 'Show Children',
+    title: 'About Vant',
+    desc: 'Vant is a set of Mobile UI Components built on Vue.',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const show = ref(false);
 
-  data() {
     return {
-      show: false,
+      t,
+      show,
     };
   },
 };