From 8d1096e6469755be00411a10da4d0f8d1d6fd314 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 14:17:21 +0800
Subject: [PATCH] docs(Pagination): use composition api

---
 src/pagination/README.md       |  9 ++++---
 src/pagination/README.zh-CN.md |  9 ++++---
 src/pagination/demo/index.vue  | 49 ++++++++++++++++++++--------------
 3 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/pagination/README.md b/src/pagination/README.md
index 7e92512b8..83b92105f 100644
--- a/src/pagination/README.md
+++ b/src/pagination/README.md
@@ -19,11 +19,12 @@ app.use(Pagination);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      currentPage: 1,
-    };
+  setup() {
+    const currentPage = ref(1);
+    return { currentPage };
   },
 };
 ```
diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md
index f054ed8c9..50f6072c9 100644
--- a/src/pagination/README.zh-CN.md
+++ b/src/pagination/README.zh-CN.md
@@ -21,11 +21,12 @@ app.use(Pagination);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      currentPage: 1,
-    };
+  setup() {
+    const currentPage = ref(1);
+    return { currentPage };
   },
 };
 ```
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index 20d22a37c..5d9c1e098 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -48,31 +48,40 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      title2: '简单模式',
-      title3: '显示省略号',
-      title4: '自定义按钮',
-      prevText: '上一页',
-      nextText: '下一页',
-    },
-    'en-US': {
-      title2: 'Simple Mode',
-      title3: 'Show ellipses',
-      title4: 'Custom Button',
-      prevText: 'Prev',
-      nextText: 'Next',
-    },
-  },
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    title2: '简单模式',
+    title3: '显示省略号',
+    title4: '自定义按钮',
+    prevText: '上一页',
+    nextText: '下一页',
+  },
+  'en-US': {
+    title2: 'Simple Mode',
+    title3: 'Show ellipses',
+    title4: 'Custom Button',
+    prevText: 'Prev',
+    nextText: 'Next',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       currentPage1: 1,
       currentPage2: 1,
       currentPage3: 1,
       currentPage4: 1,
+    });
+
+    return {
+      ...toRefs(state),
+      t,
     };
   },
 };