From 84b7e69d646dad92baf80a94fdfac419d17436d7 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 9 Dec 2020 10:28:13 +0800
Subject: [PATCH] docs(CountDown): use composition api

---
 src/count-down/README.md       | 45 ++++++++++++++----------
 src/count-down/README.zh-CN.md | 45 ++++++++++++++----------
 src/count-down/demo/index.vue  | 62 ++++++++++++++++++++--------------
 3 files changed, 93 insertions(+), 59 deletions(-)

diff --git a/src/count-down/README.md b/src/count-down/README.md
index 4d5a00c18..8c4ca9997 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -19,11 +19,12 @@ app.use(CountDown);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      time: 30 * 60 * 60 * 1000,
-    };
+  setup() {
+    const time = ref(30 * 60 * 60 * 1000);
+    return { time };
   },
 };
 ```
@@ -79,7 +80,7 @@ export default {
   :time="3000"
   :auto-start="false"
   format="ss:SSS"
-  @finish="finish"
+  @finish="onFinish"
 />
 <van-grid clickable :column-num="3">
   <van-grid-item text="Start" icon="play-circle-o" @click="start" />
@@ -92,19 +93,29 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    start() {
-      this.$refs.countDown.start();
-    },
-    pause() {
-      this.$refs.countDown.pause();
-    },
-    reset() {
-      this.$refs.countDown.reset();
-    },
-    finish() {
+  setup() {
+    const countDown = ref(null);
+
+    const start = () => {
+      countDown.value.start();
+    };
+    const pause = () => {
+      countDown.value.pause();
+    };
+    const reset = () => {
+      countDown.value.reset();
+    };
+    const onFinish = () => {
       Toast('Finished');
-    },
+    };
+
+    return {
+      start,
+      pause,
+      reset,
+      onFinish,
+      countDown,
+    };
   },
 };
 ```
diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md
index e4746af34..a0b8d3c1b 100644
--- a/src/count-down/README.zh-CN.md
+++ b/src/count-down/README.zh-CN.md
@@ -25,11 +25,12 @@ app.use(CountDown);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      time: 30 * 60 * 60 * 1000,
-    };
+  setup() {
+    const time = ref(30 * 60 * 60 * 1000);
+    return { time };
   },
 };
 ```
@@ -93,7 +94,7 @@ export default {
   :time="3000"
   :auto-start="false"
   format="ss:SSS"
-  @finish="finish"
+  @finish="onFinish"
 />
 <van-grid clickable>
   <van-grid-item text="开始" icon="play-circle-o" @click="start" />
@@ -106,19 +107,29 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    start() {
-      this.$refs.countDown.start();
-    },
-    pause() {
-      this.$refs.countDown.pause();
-    },
-    reset() {
-      this.$refs.countDown.reset();
-    },
-    finish() {
+  setup() {
+    const countDown = ref(null);
+
+    const start = () => {
+      countDown.value.start();
+    };
+    const pause = () => {
+      countDown.value.pause();
+    };
+    const reset = () => {
+      countDown.value.reset();
+    };
+    const onFinish = () => {
       Toast('倒计时结束');
-    },
+    };
+
+    return {
+      start,
+      pause,
+      reset,
+      onFinish,
+      countDown,
+    };
   },
 };
 ```
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index d60e7a821..b4e5f3674 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -30,7 +30,7 @@
       :time="3000"
       :auto-start="false"
       format="ss:SSS"
-      @finish="$toast(t('finished'))"
+      @finish="onFinish"
     />
     <van-grid clickable :column-num="3">
       <van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
@@ -41,50 +41,62 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+import Toast from '../../toast';
+import { useTranslate } from '../../composables/use-translate';
+
 export default {
   i18n: {
     'zh-CN': {
+      reset: '重置',
+      pause: '暂停',
+      start: '开始',
+      finished: '倒计时结束',
       millisecond: '毫秒级渲染',
       customStyle: '自定义样式',
       customFormat: '自定义格式',
       manualControl: '手动控制',
       formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
-      reset: '重置',
-      pause: '暂停',
-      start: '开始',
-      finished: '倒计时结束',
     },
     'en-US': {
+      reset: 'Reset',
+      pause: 'Pause',
+      start: 'Start',
+      finished: 'Finished',
       millisecond: 'Millisecond',
       customStyle: 'Custom Style',
       customFormat: 'Custom Format',
       manualControl: 'Manual Control',
       formatWithDay: 'DD Day, HH:mm:ss',
-      reset: 'Reset',
-      pause: 'Pause',
-      start: 'Start',
-      finished: 'Finished',
     },
   },
 
-  data() {
-    return {
-      time: 30 * 60 * 60 * 1000,
+  setup() {
+    const t = useTranslate();
+    const time = ref(30 * 60 * 60 * 1000);
+    const countDown = ref(null);
+
+    const start = () => {
+      countDown.value.start();
+    };
+    const pause = () => {
+      countDown.value.pause();
+    };
+    const reset = () => {
+      countDown.value.reset();
+    };
+    const onFinish = () => {
+      Toast(t('finished'));
     };
-  },
 
-  methods: {
-    start() {
-      this.$refs.countDown.start();
-    },
-
-    pause() {
-      this.$refs.countDown.pause();
-    },
-
-    reset() {
-      this.$refs.countDown.reset();
-    },
+    return {
+      time,
+      start,
+      pause,
+      reset,
+      onFinish,
+      countDown,
+    };
   },
 };
 </script>